Under the Tuscan Sun — Phase 22.4: Flutter guide-lightbox SHELL + COOK content (parity)
Gated on 22.1 (g- tokens), 22.2 (shared atoms:
StepDisc/MaterialThumb/GuideGalleryDisclosure/GuideSection/AnswerOptionRow/FlashcardPanel/TipBox/ExplanationBox/StepBadgeRow), 22.3 (those atoms adopted + proven in the 4 post-body blocks, committed83d32232). Flutter mirror of web Phases 9 + 10 (phase-9-guide-shell.mdshell/masthead/metadata ·phase-10-lightbox-cook.mdcook content). Web is the reference; web is on prod. Restyle-led, reuse-first — the cook content reuses the SAME g- atoms 22.3 shipped. Baby-step build, smoke each surface side-by-side vs web (playwrightuts-smoke+ marionette). ⚠️ Intermediate MIXED state is expected + intentional — 22.4 restyles the shared SHELL + COOK content; the LEARN content (overview CTA / lesson pages / completion / review / nonsequential behavior) stays on oldguideLightbox*styling until 22.5. The shared masthead/metadata/materials WILL update the learn overview header too (they're shared widgets), but the learn-specific chrome + behavior is 22.5.
Goal
Bring the Flutter guide lightbox's shared shell + cook-mode content to parity with the web reference: - Shell — opaque #000 field + centered white ≤650 panel (full-bleed on mobile); the close button. - Masthead — full-bleed natural-aspect cover + brand .g-band (author medallion · eyebrow · ultralight centered title · stat line). Badges FOLD into the stat line — no separate badge row. - Metadata — the generic .g-md value-syntax renderer (URL→brand-ink link · ISO-8601→humanized · else key:value), skip visible=0. - Materials — flat g-grouphdr + hairline g-mat rows, no outer card (reuse MaterialRow + shared thumb/gallery). - Cook steps — reuse StepDisc (ordinal, brand/ok/bad) + de-rainbowed head (neutral StepBadgeRow qtype + tint dur pill) + the shared answer/flashcard/tip/explanation atoms. - Cook footer — progress gOk, reset brand-ink. - Duration — humanize (estimatedTime int → "2 hrs"; metadata ISO PT30M → "30 min").
Look/feel only. The lightbox behavior — open/close, cook interactions (mark-as-done / MC-TF submit / flashcard reveal), progress, hydrate-on-open + sync-back-on-close — is the existing GuideProgressBloc (guide_lightbox.dart:62-104). Preserve it; do not change behavior.
Scope (shell ÷ content split)
- IN (22.4): the shell (
guide_lightbox.dart— barrier + panel + close), the shared masthead + metadata (guide_lightbox_cook_mode.dart_buildCoverImage/title/_buildBadges/_buildStats/_buildMetadataGrid— factored into sharedGuideBand+GuideMetadatawidgets used by cook AND the learn overview), the cook Materials (guide_lightbox_materials.dart), the cook Steps (guide_lightbox_step.dart) + the steps section header, the cook footer progress + reset (guide_lightbox_footer.dart— cook branch), + the duration humanizers. - OUT → 22.5: the learn-specific content —
guide_lightbox_overview.dartAbout/objective callouts + adaptive Start/Continue/Review CTA + scroll hint;guide_lightbox_lesson_page.dart;guide_lightbox_completion.dart;guide_lightbox_review.dart; the learn footer prev/next nav; the nonsequential behavior (Phase-20 contract). Theguide_picker.dartmulti-guide chooser also → 22.5. - OUT of program: standalone
media/media_collectionblocks, CEWL (as ever).