ThymeTable: Full Technical Blueprint

1. HTML Structure & Navigation

The application uses a 4-tab Single Page Application (SPA) architecture.

Setup (tab-setup): Houses the management card and the dynamic 'dishStack'.
Plan (tab-plan): Displays the generated timeline and the "Start Now" utility.
Config (tab-config): Contains nested sub-tabs for Appliance, Meal, and Dish management.
Guide (tab-guide): An empty container populated by an asynchronous fetch of guide.html.

2. Comprehensive Function Documentation

Logic Engine (engine.js)

renderPlan()

Orchestrates the backward-timing logic. It resolves dependencies via a 10-pass readyMap loop, calculates interleaving for Early Prep (🥣) to fill gaps in manual task sequences, and generates automated Oven pre-heat ACTIONs.

addTaskToEngine(ms, icon, txt, dishName, dishId, ...)

Creates a task object with a unique ID (UID). It checks the global checkedTasks list to sort the action into either 'completedGroups' or the 'scheduledPlan'.

finalizePlanUI(completedGroups, scheduledPlan, countdownHtml)

Injects the sorted plan into the DOM. It identifies the first uncompleted task and applies the next-action highlight style.

UI & Data Management (script.js)

showTab(name) / showSubTab(name)

Controls visibility of tab content and persists the active tab state to local storage.

addNewDish(data) / addTaskToZone(dishId, zone, data)

Dynamic DOM constructors for dish cards and their associated task inputs (Early, Pre, Mid, Post).

saveSession()

Serialises the entire DOM state into a nested JSON object and saves to 'tt_active_session'.

startNow()

Calculates the millisecond offset between the current clock and the first planned task, then updates the serving time.

toggleCheck(cb, uid)

Records completion timestamps and updates the grey/italic styling of the plan.

refreshJumpSelect() / jumpToDish(id)

Manages smooth-scroll navigation to specific dish cards in the setup tab.

refreshDeps() / updateMethodDropdowns()

Ensures dependency and appliance dropdowns are synchronised across all dynamic dish cards.

recallMeal(n) / addFromLibrary(name)

Retrieves saved templates from local storage to populate the active session.

exportFullApp() / exportSingleMeal(name) / importData(event, type)

Handles file-based backup and restoration using the .ttbl and .json formats.

3. CSS Visual Specifications

Global Borders: 1.5px solid #64748b on all inputs, selects, and buttons.
Dish Cards: 10px solid left border using the high-vis-border variable.
Grid System: 4-column desktop layout (30px gaps) collapsing to 2-column mobile layout.
Task Completion: .completed class applies #9ca3af (grey) and italic font-style.
Print Handling: @media print preserves the header, logo, and plan while hiding all management controls.

4. Data Schema

// tt_active_session structure
{
  "title": "Meal Name",
  "serve": "18:00", // 24-hour clock
  "dishUp": "10", // Plating window
  "dishes": [
    {
      "id": "unique_id", "name": "Dish Name", "cook": "60", "method": "oven",
      "shared": true, "depId": "parent_id",
      "early": [{"val": "10", "desc": "Prep"}], // Interleaved
      "prep": [...], "mid": [...], "post": [...] // Sequential
    }
  ]
}
        

EXACT RECREATION PROMPT

Build 'ThymeTable', a kitchen management system.
FILES: index.html, style.css, script.js, engine.js, guide.html.

1. LOGIC:
- Backward-timing from a 24-hour 'Eating Time'.
- 10-pass dependency map for 'Wait For' chains.
- Interleave Early Prep (🥣) into chronological gaps.
- Automated Oven pre-heat ACTIONs (10m before use).
- 'Start Now' button to offset the whole plan to current clock.

2. INTERFACE:
- 4 Tabs: Setup, Plan, Settings, Guide.
- 1.5px solid #64748b borders on all controls; Teal #0d9488 accents.
- Plan: Highlight next task; mark completed as grey/italic.
- Print: Logo/Name must persist on the printed PDF.

3. DATA:
- Auto-save to localStorage ('tt_' prefix).
- Features: Recall Meal, Library, Jump To, Reset, Backup/Restore (.ttbl).
- Guide: British English, 3 sections (Setup, Plan, Settings) + FAQ.
- Technical: Full function/style/schema documentation.
            