{/* Body on left */}

{showAiBadge && (

)} {showAiBadge && aiReason && (

{aiReason}

)}

{article.title}

{/* favicon placeholder */}

{article.feed}

{article.time} {!article.isRead && (

)}

{/* Thumbnail 84x84 on right */}

); } // ─── Large App Bar (matches LargeSliverAppBar, expanded state) ─── function M3LargeAppBar({ title, actions, p, ff = '"Noto Sans JP", system-ui' }) { return (

{/* Top action row */}

{actions}

{/* Big title row */}

{title}

); } // ─── Home digest card (filled primaryContainer strip) ─── function HomeDigestCard({ p, ff, t }) { return (

{t.digestCardTitle}

{t.digestCardSubtitle}

); } // ─── FAB ─── function FAB({ p, icon='add', onClick, extended = false, label, bottom = 16, ff = '"Noto Sans JP", system-ui' }) { return (

{extended && ( {label} )}

); } // ───────────────────────────────────────────────────── // HOME SCREEN — accurate recreation (LargeAppBar + Digest card + AI section) // ───────────────────────────────────────────────────── function YomiHome({ dark = false, accent = '#4A90D9', selectedTab = 0, onTabSelect, lang = 'ja', showDigestCard = true }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); const chips = [ { id: 'all', label: t.chipAll }, { id: 'tech', label: t.chipTech }, { id: 'biz', label: t.chipBiz }, { id: 'design', label: t.chipDesign }, ]; const [sel, setSel] = useState('all'); // AI recommended (top section) const aiItems = [ { title: t.ai1Title, feed: t.ai1Feed, time: t.ai1Time, reason: t.ai1Reason, c1:'oklch(0.78 0.10 260)', c2:'oklch(0.86 0.10 30)', faviconHue: 260, isRead: false }, { title: t.ai2Title, feed: t.ai2Feed, time: t.ai2Time, reason: t.ai2Reason, c1:'oklch(0.78 0.10 200)', c2:'oklch(0.86 0.08 320)', faviconHue: 200, isRead: false }, ]; // Regular articles const articles = [ { title: t.art1Title, feed: t.art1Feed, time: t.art1Time, c1:'oklch(0.80 0.10 220)', c2:'oklch(0.85 0.09 50)', faviconHue: 220, isRead: false }, { title: t.art2Title, feed: t.art2Feed, time: t.art2Time, c1:'oklch(0.80 0.10 300)', c2:'oklch(0.85 0.09 200)', faviconHue: 300, isRead: false }, { title: t.art3Title, feed: t.art3Feed, time: t.art3Time, c1:'oklch(0.80 0.10 20)', c2:'oklch(0.85 0.09 140)', faviconHue: 20, isRead: true }, { title: t.art4Title, feed: t.art4Feed, time: t.art4Time, c1:'oklch(0.80 0.10 140)', c2:'oklch(0.85 0.09 260)', faviconHue: 140, isRead: true }, ]; return (

} ff={ff} />

{sel === 'all' && showDigestCard && } {sel === 'all' && ( <> {/* AI section header */}

{t.aiRecommendLabel}

{aiItems.map((a, i) => ( ))}

)} {articles.map((a, i) => ( ))}

); } // ───────────────────────────────────────────────────── // SUBSCRIBED FEEDS — matches feed_management_screen.dart + reader_feed_pane.dart // LargeAppBar + "すべて" virtual row + collapsible category sections + feed rows // ───────────────────────────────────────────────────── function YomiCategoryScreen({ dark = false, accent = '#4A90D9', unlocked = false, lang = 'ja' }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); const groups = [ { id: 'tech', name: t.cat1, locked: false, feeds: [ { id: 'f1', title: 'TechCrunch JP', unread: 12, hue: 200 }, { id: 'f2', title: 'Zenn', unread: 8, hue: 280 }, { id: 'f3', title: 'Qiita Trend', unread: 3, hue: 160 }, ], }, { id: 'biz', name: t.cat2, locked: false, feeds: [ { id: 'f4', title: '日経XTECH', unread: 5, hue: 30 }, { id: 'f5', title: 'NewsPicks', unread: 0, hue: 90 }, ], }, { id: 'private', name: t.cat3, locked: true, pulse: true, feeds: [ { id: 'f6', title: 'Personal Blog', unread: 2, hue: 320 }, ], }, { id: 'news', name: t.cat5, locked: false, feeds: [ { id: 'f7', title: 'NHK NEWS WEB', unread: 14, hue: 0 }, ], }, ]; // Apply lock visibility const visibleGroups = groups.filter(g => unlocked || !g.locked); const totalUnread = visibleGroups.reduce((s, g) => s + g.feeds.reduce((a, f) => a + f.unread, 0), 0); return (

} ff={ff} />

{/* "すべて" virtual row */}

{/* Category sections */} {visibleGroups.map((g, gi) => { const groupUnread = g.feeds.reduce((s, f) => s + f.unread, 0); const showPulse = g.pulse && !unlocked; return (

{/* Category header */}

{g.locked && ( )} {g.name} {groupUnread > 0 && ( )} {showPulse && ( )}

{/* Feed rows */} {g.feeds.map((f, fi) => (

{/* favicon */}

0 ? 600 : 400, color: p.onSurface, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }}>{f.title} {f.unread > 0 && }

))}

); })}

); } function FeedListRow({ p, ff, icon, label, unread, isVirtual = false }) { return (

{label} {unread > 0 && }

); } function UnreadBadge({ count, muted = false, p, ff }) { const bg = muted ? p.surfaceContainerHighest : p.primaryContainer; const fg = muted ? p.onSurfaceVariant : p.onPrimaryContainer; return (

{count > 999 ? '999+' : count}

); } // Compatibility alias (for gallery that used old name) function YomiLockScreen(props) { return ; } // ───────────────────────────────────────────────────── // Material 3 NavigationBar — 4 destinations matching shell_screen.dart // Home · Digest · Recommend · Settings (labels always visible, height 64) // ───────────────────────────────────────────────────── function M3NavBar({ p, selected = 0, onSelect = () => {}, lang = 'ja' }) { const t = getScreens(lang); const ff = screenFontFamily(lang); const items = [ { icon: 'home_outline', selIcon: 'home', label: t.navHome }, { icon: 'view_quilt_outline', selIcon: 'view_quilt', label: t.navDigest }, { icon: 'auto_awesome_outline', selIcon: 'auto_awesome', label: t.navRecommend }, { icon: 'settings_outline', selIcon: 'settings', label: t.navSettings }, ]; return (

{items.map((it, i) => { const sel = i === selected; return (

onSelect(i)} style={{ flex: 1, position: 'relative', height: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, cursor: 'pointer', }}>

{it.label}

); })}

); } // ───────────────────────────────────────────────────── // Biometric dialog (Android-style Material 3) // ───────────────────────────────────────────────────── function BiometricSheet({ accent = '#4A90D9', dark = false, lang = 'ja' }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); return (

{t.bioTitle}

{t.bioBody}

{t.bioCancel}

); } // ───────────────────────────────────────────────────── // ARTICLE DETAIL — matches article_detail_panel.dart (Reader screen) // AppBar with translate/bookmark/browser/share + category label + title + // meta row + hero 16:9 + full-content toggle + AI summary card + body + // related articles // ───────────────────────────────────────────────────── function YomiArticle({ dark = false, accent = '#4A90D9', lang = 'ja' }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); const monoFf = 'JetBrains Mono, monospace'; return (

} actions={<> } title="" ff={ff} />

{/* Category label (UPPERCASE primary) */}

{t.articleCategoryLabel}

{/* Title 24px w700 */}

{t.articleTitle}

{/* Meta row: favicon + feed + · + time */}

{t.articleFeed} · {t.articleTime}

{/* 16:9 hero with rounded 16 */}

{t.articleHeroLabel}

{/* Full-content toggle row */}

{t.articleFullContent} {/* Material-style switch */}

{/* AI Summary card (tertiaryContainer) */}

{t.articleSummaryTitle}

{t.articleSummaryBullets.map((b, i) => (

・ {b}

))}

{/* Article body placeholder lines */}

{[95, 100, 88, 95, 78, 90, 72, 98, 60, 85].map((w, i) => (

))}

{/* Related articles section */}

{t.articleRelatedLabel}

{t.articleRelated.map((r, i) => (

0 ? `1px solid ${p.outlineVariant}` : 'none', display: 'flex', gap: 12, alignItems: 'center', }}>

{r.title}

{r.feed} · {r.time}

))}

); } // ───────────────────────────────────────────────────── // RECOMMENDATION SCREEN — matches recommendation_screen.dart // ───────────────────────────────────────────────────── function YomiRecommendScreen({ dark = false, accent = '#4A90D9', lang = 'ja', selectedTab = 2, onTabSelect }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); const feeds = [ { title: t.feed1Title, url: t.feed1Url, reason: t.feed1Reason }, { title: t.feed2Title, url: t.feed2Url, reason: t.feed2Reason }, { title: t.feed3Title, url: t.feed3Url, reason: t.feed3Reason }, ]; return (

} ff={ff} />

{feeds.map((f, i) => (

{f.title}

{f.url}

{f.reason}

{t.recommendAdd}

))}

); } // ───────────────────────────────────────────────────── // DIGEST SCREEN — matches digest_screen.dart (mobile Pro view) // LargeAppBar + summary strip + topic cards // ───────────────────────────────────────────────────── function YomiDigestScreen({ dark = false, accent = '#4A90D9', lang = 'ja', selectedTab = 1, onTabSelect }) { const p = palette(dark, accent); const t = getScreens(lang); const ff = screenFontFamily(lang); const topics = t.digestTopics || []; return (

} ff={ff} />

{/* Summary strip */}

{t.digestSummaryDate} · {t.digestSummaryCount}

{t.digestRegenerate}

{/* Topic cards */} {topics.map((topic, i) => (

{/* Importance badge */}

{topic.importanceLabel}

{topic.title}

{topic.summary}

{t.digestRelatedArticles}

{topic.articles.map((a, j) => (

0 ? `1px solid ${p.outlineVariant}` : 'none', }}>

{a.title}

{a.feed} · {a.time}

))}

); } // Legacy placeholder component that lp.jsx might still reference function ImgPlaceholder({ w = '100%', h = 88, hue = 240, dark = false, label }) { const bg1 = `oklch(${dark ? 0.30 : 0.92} 0.03 ${hue})`; const bg2 = `oklch(${dark ? 0.26 : 0.88} 0.04 ${hue})`; return (

{label && {label}}

); } // "Icon" legacy export (used by lp.jsx — remap to MIcon) function Icon({ name, size = 16, color = 'currentColor', stroke }) { const map = { sparkle: 'auto_awesome', lock: 'lock', unlock: 'lock_open', cloud: 'cloud_off', bookmark: 'bookmark_border', download: 'download', search: 'search', home: 'article', grid: 'widgets', settings: 'insights', fingerprint: 'fingerprint', chevron: 'chevron_left', close: 'close', clock: 'article', check: 'auto_awesome', plus: 'add', rss: 'rss_feed', }; return ; } Object.assign(window, { MIcon, Icon, ImgPlaceholder, palette, M3, YomiHome, YomiCategoryScreen, YomiLockScreen, YomiArticle, YomiRecommendScreen, YomiDigestScreen, BiometricSheet, M3NavBar, M3LargeAppBar, HomeDigestCard, });