@sambitcreate/parsely-cli 2.0.0 → 2.2.0

package/dist/components/LandingScreen.js

@@ -0,0 +1,89 @@
+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';
+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 };
+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 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',
+        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, 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 (_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.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,19 @@
+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';
+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 }) {
+    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/Panel.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+import { type BoxProps } from 'ink';
+interface PanelProps extends PropsWithChildren, Omit<BoxProps, 'children'> {
+    title?: string;
+    eyebrow?: string;
+    accentColor?: string;
+}
+export declare function Panel({ title, eyebrow, accentColor, children, ...boxProps }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { theme } from '../theme.js';
+export function Panel({ title, eyebrow, accentColor = theme.colors.border, children, ...boxProps }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: accentColor, paddingX: 1, paddingY: 0, ...boxProps, children: [(eyebrow || title) && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [eyebrow && (_jsx(Text, { color: theme.colors.muted, children: eyebrow.toUpperCase() })), title && (_jsx(Text, { bold: true, color: accentColor, children: title }))] })), children] }));
+}

package/dist/components/PhaseRail.d.ts

@@ -0,0 +1,9 @@
+import type { Recipe, ScrapeStatus } from '../services/scraper.js';
+type AppPhase = 'idle' | 'scraping' | 'display' | 'error';
+interface PhaseRailProps {
+    phase: AppPhase;
+    status?: ScrapeStatus | null;
+    recipe?: Recipe | null;
+}
+export declare function PhaseRail({ phase, status, recipe }: PhaseRailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PhaseRail.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { theme } from '../theme.js';
+const steps = [
+    {
+        key: 'browser',
+        label: 'Fetch page',
+        detail: 'Launch Chrome or Chromium and load the recipe page.',
+    },
+    {
+        key: 'parsing',
+        label: 'Read schema',
+        detail: 'Look for JSON-LD recipe data and normalize the shape.',
+    },
+    {
+        key: 'ai',
+        label: 'AI rescue',
+        detail: 'Call gpt-4o-mini only when the page is missing usable recipe data.',
+    },
+];
+function getStepState(step, phase, status, recipe) {
+    if (phase === 'idle')
+        return 'pending';
+    if (phase === 'display' && recipe?.source === 'browser') {
+        if (step === 'ai')
+            return 'skipped';
+        return 'complete';
+    }
+    if (phase === 'display' && recipe?.source === 'ai') {
+        return 'complete';
+    }
+    const activePhase = status?.phase;
+    if (step === 'browser') {
+        if (activePhase === 'browser')
+            return 'active';
+        if (activePhase === 'parsing' || activePhase === 'ai' || activePhase === 'done' || activePhase === 'error') {
+            return 'complete';
+        }
+    }
+    if (step === 'parsing') {
+        if (activePhase === 'parsing')
+            return 'active';
+        if (activePhase === 'ai' || activePhase === 'done' || activePhase === 'error') {
+            return 'complete';
+        }
+    }
+    if (step === 'ai') {
+        if (activePhase === 'ai')
+            return 'active';
+        if (recipe?.source === 'browser' && phase === 'display')
+            return 'skipped';
+        if (activePhase === 'done' || activePhase === 'error') {
+            return recipe?.source === 'browser' ? 'skipped' : 'complete';
+        }
+    }
+    return 'pending';
+}
+function getStepColor(state) {
+    switch (state) {
+        case 'active':
+            return theme.colors.secondary;
+        case 'complete':
+            return theme.colors.success;
+        case 'skipped':
+            return theme.colors.subtle;
+        default:
+            return theme.colors.muted;
+    }
+}
+function getStepSymbol(state) {
+    switch (state) {
+        case 'active':
+            return theme.symbols.active;
+        case 'complete':
+            return theme.symbols.check;
+        case 'skipped':
+            return theme.symbols.skip;
+        default:
+            return theme.symbols.pending;
+    }
+}
+export function PhaseRail({ phase, status, recipe }) {
+    return (_jsx(Box, { flexDirection: "column", children: steps.map((step, index) => {
+            const state = getStepState(step.key, phase, status, recipe);
+            const color = getStepColor(state);
+            return (_jsxs(Box, { flexDirection: "column", marginBottom: index === steps.length - 1 ? 0 : 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, bold: true, children: getStepSymbol(state) }), _jsx(Text, { color: state === 'pending' ? theme.colors.text : color, bold: state !== 'pending', children: step.label })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: theme.colors.muted, children: step.detail }) })] }, step.key));
+        }) }));
+}

package/dist/components/RecipeCard.d.ts

@@ -1,6 +1,9 @@
 import type { Recipe } from '../services/scraper.js';
 interface RecipeCardProps {
     recipe: Recipe;
+    width: number;
+    height: number;
+    sourceUrl?: string;
 }
-export declare function RecipeCard({ recipe }: 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,10 +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 { isoToMinutes, formatMinutes } from '../utils/helpers.js';
-/**
- * Extract instruction text from the various formats recipes use.
- */
+import { formatMinutes, getUrlHost, isoToMinutes } from '../utils/helpers.js';
+import { wrapText } from '../utils/text-layout.js';
 function extractInstructions(recipe) {
     const raw = recipe.recipeInstructions;
     if (!raw)
@@ -33,14 +33,204 @@ function extractInstructions(recipe) {
     }
     return steps;
 }
-function TimeField({ label, iso }) {
+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 formatTimeValue(iso) {
     if (!iso)
-        return null;
-    const mins = isoToMinutes(iso);
-    return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: theme.colors.success, bold: true, children: label }), _jsx(Text, { color: theme.colors.text, children: formatMinutes(mins) }), _jsxs(Text, { color: theme.colors.muted, dimColor: true, children: ["(", iso, ")"] })] }));
+        return 'Not listed';
+    return formatMinutes(isoToMinutes(iso));
+}
+function buildRule(width, maxWidth) {
+    const length = Math.max(18, Math.min(width, maxWidth));
+    return theme.symbols.line.repeat(length);
+}
+function splitTitle(title, maxChars, maxLines = 3) {
+    const words = title.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return ['Untitled recipe'];
+    }
+    const lines = [];
+    let current = '';
+    for (const word of words) {
+        const next = current ? `${current} ${word}` : word;
+        if (current && next.length > maxChars) {
+            lines.push(current);
+            current = word;
+            continue;
+        }
+        current = next;
+    }
+    if (current) {
+        lines.push(current);
+    }
+    while (lines.length > maxLines) {
+        const last = lines.pop();
+        const prev = lines.pop();
+        if (!last || !prev) {
+            break;
+        }
+        lines.push(`${prev} ${last}`);
+    }
+    return lines;
+}
+function Metric({ label, value }) {
+    return (_jsxs(Box, { flexDirection: "column", width: 18, marginRight: 2, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: label }), _jsx(Text, { color: theme.colors.recipeText, bold: true, children: value })] }));
+}
+function SidebarCard({ title, children, }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.recipeBorder, paddingX: 1, paddingY: 0, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: title }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: 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 }) {
+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 sourceLabel = recipe.source === 'browser' ? 'JSON-LD' : 'AI Fallback';
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.secondary, paddingX: 1, paddingY: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Recipe Extract" }), _jsxs(Text, { color: theme.colors.muted, children: [' ', "(", sourceLabel, ")"] })] }), recipe.name && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.text, children: recipe.name }) })), (recipe.prepTime || recipe.cookTime || recipe.totalTime) && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(TimeField, { label: "Prep Time ", iso: recipe.prepTime }), _jsx(TimeField, { label: "Cook Time ", iso: recipe.cookTime }), _jsx(TimeField, { label: "Total Time", iso: recipe.totalTime })] })), recipe.recipeIngredient && recipe.recipeIngredient.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: "Ingredients" }), recipe.recipeIngredient.map((item, i) => (_jsxs(Text, { color: theme.colors.text, children: ['  ', theme.symbols.bullet, " ", item] }, i)))] })), instructions.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.info, children: "Instructions" }), instructions.map((step, i) => (_jsxs(Text, { color: theme.colors.text, wrap: "wrap", children: ['  ', i + 1, ". ", step] }, i)))] }))] }));
+    const ingredients = recipe.recipeIngredient ?? [];
+    const ingredientKeys = buildOccurrenceKeys(ingredients);
+    const instructionKeys = buildOccurrenceKeys(instructions);
+    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);
+    const heroRule = buildRule(Math.floor(width * (wide ? 0.46 : 0.7)), 62);
+    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 && 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/ScrapingStatus.d.ts

@@ -1,6 +1,7 @@
 import type { ScrapeStatus } from '../services/scraper.js';
 interface ScrapingStatusProps {
     status: ScrapeStatus;
+    width: number;
 }
-export declare function ScrapingStatus({ status }: ScrapingStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrapingStatus({ status, width }: ScrapingStatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ScrapingStatus.js

@@ -1,16 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { Panel } from './Panel.js';
 import { theme } from '../theme.js';
 const phaseLabel = {
-    browser: 'Browser Scraping',
-    parsing: 'Parsing HTML',
-    ai: 'AI Extraction',
-    done: 'Complete',
-    error: 'Error',
+    browser: 'Fetching recipe page',
+    parsing: 'Reading recipe schema',
+    ai: 'Running AI rescue',
+    done: 'Recipe ready',
+    error: 'Scrape failed',
 };
-export function ScrapingStatus({ status }) {
+function getPhaseColor(phase) {
+    switch (phase) {
+        case 'done':
+            return theme.colors.success;
+        case 'error':
+            return theme.colors.error;
+        case 'ai':
+            return theme.colors.accent;
+        case 'parsing':
+            return theme.colors.secondary;
+        default:
+            return theme.colors.primary;
+    }
+}
+export function ScrapingStatus({ status, width }) {
     const isActive = status.phase !== 'done' && status.phase !== 'error';
-    const label = phaseLabel[status.phase] ?? status.phase;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, paddingY: 1, children: [_jsxs(Box, { gap: 1, children: [isActive && (_jsx(Text, { color: theme.colors.primary, children: _jsx(Spinner, { type: "dots" }) })), _jsx(Text, { bold: true, color: theme.colors.label, children: label })] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { color: theme.colors.muted, children: status.message }) })] }));
+    const phaseText = phaseLabel[status.phase] ?? status.phase;
+    const accentColor = getPhaseColor(status.phase);
+    const compact = width < 86;
+    return (_jsxs(Panel, { title: phaseText, eyebrow: "Live status", accentColor: accentColor, flexGrow: 1, marginBottom: compact ? 1 : 0, children: [_jsxs(Box, { gap: 1, children: [isActive && (_jsx(Text, { color: accentColor, children: _jsx(Spinner, { type: "dots" }) })), _jsx(Text, { bold: true, color: theme.colors.text, children: status.message })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.colors.muted, children: "Browser mode is cheapest and fastest when the site publishes good recipe metadata." }), _jsx(Text, { color: theme.colors.muted, children: "The AI path stays in reserve until Parsely fails to recover enough structured data." })] })] }));
 }

package/dist/components/URLInput.d.ts

@@ -1,5 +1,8 @@
 interface URLInputProps {
     onSubmit: (url: string) => void;
+    onToggleTheme?: () => void;
+    mode?: 'default' | 'landing';
+    width?: number;
 }
-export declare function URLInput({ onSubmit }: 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,21 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text } from 'ink';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Box, Text, useStdin } from 'ink';
 import TextInput from 'ink-text-input';
 import { theme } from '../theme.js';
-import { isValidUrl } from '../utils/helpers.js';
-export function URLInput({ onSubmit }) {
+import { normalizeRecipeUrl, sanitizeSingleLineInput } from '../utils/helpers.js';
+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 trimmed = input.trim();
-        if (!trimmed) {
-            setError('Please enter a URL');
-            return;
-        }
-        // Auto-prepend https:// if missing protocol
-        const url = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
-        if (!isValidUrl(url)) {
+        const url = normalizeRecipeUrl(input);
+        if (!url) {
+            if (!input.trim()) {
+                setError('Please enter a URL');
+                return;
+            }
             setError('Invalid URL. Please enter a valid recipe URL.');
             return;
         }
@@ -23,9 +28,32 @@ export function URLInput({ onSubmit }) {
         setValue('');
         onSubmit(url);
     };
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { borderStyle: "round", borderColor: theme.colors.borderFocus, paddingX: 1, children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: '\u276F ' }), _jsx(TextInput, { value: value, onChange: (v) => {
-                            setValue(v);
-                            if (error)
-                                setError('');
-                        }, onSubmit: handleSubmit, placeholder: "Enter recipe URL..." })] }), error && (_jsx(Box, { marginLeft: 2, marginTop: 0, children: _jsxs(Text, { color: theme.colors.error, children: [theme.symbols.cross, " ", error] }) }))] }));
+    const handleChange = (nextValue) => {
+        if (ignoreNextChange.current) {
+            ignoreNextChange.current = false;
+            return;
+        }
+        const sanitized = sanitizeSingleLineInput(nextValue);
+        setValue(sanitized);
+        if (error)
+            setError('');
+    };
+    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/components/Welcome.d.ts

@@ -1 +1,6 @@
-export declare function Welcome(): import("react/jsx-runtime").JSX.Element;
+interface WelcomeProps {
+    compact?: boolean;
+    minimal?: boolean;
+}
+export declare function Welcome({ compact, minimal }: WelcomeProps): import("react/jsx-runtime").JSX.Element;
+export {};