@sambitcreate/parsely-cli 2.0.0 → 2.1.0

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

package/dist/components/RecipeCard.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } 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 { useDisplayPalette } from '../hooks/useDisplayPalette.js';
 function extractInstructions(recipe) {
     const raw = recipe.recipeInstructions;
     if (!raw)
@@ -33,14 +32,80 @@ 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 }) {
+export function RecipeCard({ recipe, width, sourceUrl }) {
+    useDisplayPalette(theme.colors.recipePaper);
     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 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 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;
+    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" })] })] })] })] })] }) }));
 }

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

package/dist/components/URLInput.js

@@ -1,21 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text } 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, mode = 'default', width }) {
     const [value, setValue] = useState('');
     const [error, setError] = useState('');
+    const landing = mode === 'landing';
+    const landingButtonLabel = '  Go  ';
     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 +23,14 @@ 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) => {
+        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] }) }))] }));
 }

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 {};

package/dist/components/Welcome.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { Panel } from './Panel.js';
 import { theme } from '../theme.js';
-export function Welcome() {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, paddingX: 1, children: [_jsx(Text, { color: theme.colors.text, children: "Paste a recipe URL below to extract ingredients and instructions." }), _jsx(Text, { color: theme.colors.muted, children: "Uses browser scraping with AI fallback for best results." })] }));
+export function Welcome({ compact = false, minimal = false }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Panel, { title: minimal ? 'Paste a recipe page to extract the cookable bits.' : 'Turn any recipe page into a clean cooking brief.', eyebrow: "Recipe deck", accentColor: theme.colors.primary, children: _jsx(Text, { color: theme.colors.text, children: minimal
+                        ? 'Parsely pulls out timing, ingredients, and steps without the surrounding clutter.'
+                        : 'Parsely strips away popups, rambling intros, and clutter so you can focus on timing, ingredients, and steps.' }) }), !minimal && (_jsxs(Panel, { title: "What happens next", eyebrow: "Workflow", accentColor: theme.colors.secondary, marginTop: 1, children: [_jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Try JSON-LD and other structured recipe markup first."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Fall back to AI only when the page needs rescue."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Plate the result in a terminal-friendly cooking layout."] }), !compact && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.muted, children: "Tip: most dedicated recipe sites work immediately if they publish Schema.org metadata." }) }))] }))] }));
 }

package/dist/hooks/useDisplayPalette.d.ts

@@ -0,0 +1 @@
+export declare function useDisplayPalette(color: string): void;

package/dist/hooks/useDisplayPalette.js

@@ -0,0 +1,15 @@
+import { useStdout } from 'ink';
+import { useEffect } from 'react';
+import { resetDefaultTerminalBackground, setDefaultTerminalBackground, shouldUseDisplayPalette, } from '../utils/terminal.js';
+export function useDisplayPalette(color) {
+    const { stdout, write } = useStdout();
+    useEffect(() => {
+        if (!stdout.isTTY || !shouldUseDisplayPalette()) {
+            return;
+        }
+        write(setDefaultTerminalBackground(color));
+        return () => {
+            write(resetDefaultTerminalBackground());
+        };
+    }, [color, stdout, write]);
+}

package/dist/hooks/useTerminalViewport.d.ts

@@ -0,0 +1,6 @@
+interface Viewport {
+    width: number;
+    height: number;
+}
+export declare function useTerminalViewport(): Viewport;
+export {};

package/dist/hooks/useTerminalViewport.js

@@ -0,0 +1,23 @@
+import { useStdout } from 'ink';
+import { useEffect, useState } from 'react';
+function getViewport(stdout) {
+    return {
+        width: stdout.columns ?? 100,
+        height: stdout.rows ?? 32,
+    };
+}
+export function useTerminalViewport() {
+    const { stdout } = useStdout();
+    const [viewport, setViewport] = useState(() => getViewport(stdout));
+    useEffect(() => {
+        const onResize = () => {
+            setViewport(getViewport(stdout));
+        };
+        onResize();
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [stdout]);
+    return viewport;
+}

package/dist/services/scraper.d.ts

@@ -18,9 +18,16 @@ export interface ScrapeStatus {
     message: string;
     recipe?: Recipe;
 }
+/**
+ * Walk through JSON-LD script blocks and return the first Recipe object found.
+ * Handles direct Recipe type, @graph arrays, and nested lists.
+ */
+export declare function findRecipeJson(scripts: string[]): Record<string, unknown> | null;
+export declare function containsBrowserChallenge(html: string): boolean;
+export declare function extractRecipeFromHtml(html: string): Recipe | null;
 /**
  * Scrape a recipe from the given URL.
  * Tries Puppeteer-based browser scraping first, falls back to OpenAI.
  * Calls `onStatus` with progress updates so the TUI can reflect each phase.
  */
-export declare function scrapeRecipe(url: string, onStatus: (status: ScrapeStatus) => void): Promise<Recipe>;
+export declare function scrapeRecipe(url: string, onStatus: (status: ScrapeStatus) => void, signal?: AbortSignal): Promise<Recipe>;