{
  "spec": "quick-html/v0",
  "id": "project-plan",
  "version": "0.1.0",
  "name": "Project Plan",
  "description": "A one-page landscape project plan built around a real Gantt chart: a time grid of up to 12 periods, task bars in four states, a today marker, milestone diamonds, risks and assumptions. Pick it when someone wants a timeline, phasing or plan on one page.",
  "useWhen": [
    "project plan",
    "gantt chart",
    "project timeline",
    "phasing plan",
    "milestone plan",
    "projectplanning op één pagina",
    "Projektplan mit Gantt",
    "plan de projet",
    "roadmap on one page"
  ],
  "format": "printable",
  "theme": "work-projects",
  "audience": [
    "pmo",
    "consultant",
    "exec"
  ],
  "tags": [
    "gantt",
    "timeline",
    "milestones",
    "planning",
    "phases"
  ],
  "language": "en",
  "page": {
    "size": "A4",
    "orientation": "landscape"
  },
  "modules": [
    "edit-overlay",
    "print-helper"
  ],
  "slots": [
    {
      "name": "doc-title",
      "type": "text",
      "required": true,
      "example": "Project plan — New Distribution Centre Zwolle",
      "notes": "Browser tab title; used as the download filename."
    },
    {
      "name": "project-name",
      "type": "text",
      "required": true,
      "example": "New Distribution Centre — Zwolle",
      "notes": "The project, not the document. Keep under ~50 chars so it stays on one line."
    },
    {
      "name": "plan-subtitle",
      "type": "text",
      "required": true,
      "example": "Bergveld Foodservice B.V. — consolidating the Apeldoorn and Kampen depots into one 24.000 m² automated DC.",
      "notes": "One sentence: whose project and what it delivers. Max ~130 chars."
    },
    {
      "name": "plan-owner",
      "type": "text",
      "required": true,
      "example": "Nadia el Amrani",
      "notes": "Project lead — the person accountable for the plan."
    },
    {
      "name": "plan-sponsor",
      "type": "text",
      "required": false,
      "example": "Hugo Stellinga (COO)",
      "notes": "Executive sponsor, with role in brackets."
    },
    {
      "name": "plan-date",
      "type": "date",
      "required": true,
      "example": "19 Aug 2026",
      "notes": "Baseline date of this revision, format \"19 Aug 2026\"."
    },
    {
      "name": "plan-ref",
      "type": "text",
      "required": false,
      "example": "PRJ-2026-014 rev 3",
      "notes": "Project reference and revision; the label \"Ref\" is fixed. Drop the revision if there is only one."
    },
    {
      "name": "plan-status",
      "type": "text",
      "required": true,
      "example": "In execution",
      "notes": "Short chip, 1–3 words: Draft / Baselined / In execution / On hold."
    },
    {
      "name": "timeline-caption",
      "type": "text",
      "required": true,
      "example": "Mar 2026 → Feb 2027 · monthly",
      "notes": "States the horizon and the unit of the period columns. Must agree with the period labels."
    },
    {
      "name": "today-style",
      "type": "text",
      "required": true,
      "example": "left:46.8%",
      "notes": "Attribute slot on the today marker. Position of the reporting date on the same 0–100% scale as the bars; 46.8% is mid-way through column 6 of 12."
    },
    {
      "name": "today-label",
      "type": "text",
      "required": true,
      "example": "Today · 19 Aug",
      "notes": "Very short — it sits in a pill on the line. Max ~16 chars."
    },
    {
      "name": "risks-content",
      "type": "html",
      "required": false,
      "example": "<ul><li><strong>Racking delivery is the critical path.</strong> A two-week slip pushes migration into the December peak.</li></ul>",
      "notes": "Inside the risks optional. <ul> with 2–4 <li>; lead each with the risk in <strong>, then the mitigation."
    },
    {
      "name": "assumptions-content",
      "type": "html",
      "required": false,
      "example": "<ul><li>Building handover on 30&nbsp;Oct&nbsp;2026 per contract; penalty clause €&nbsp;4.500 per&nbsp;week.</li></ul>",
      "notes": "Inside the assumptions optional. <ul> with 2–5 <li>: dates, volumes, budget and dependencies the plan rests on."
    },
    {
      "name": "footer-line",
      "type": "text",
      "required": false,
      "example": "Bergveld Foodservice B.V. · steering committee pack, monthly · confidential",
      "notes": "Left-hand footer note; the right-hand side is fixed."
    }
  ],
  "repeats": [
    {
      "name": "period",
      "description": "One column of the time grid — a week, sprint, month or quarter. The column count sets the bar geometry: with N periods each column is 100/N %.",
      "min": 4,
      "max": 12,
      "slots": [
        {
          "name": "period-label",
          "type": "text",
          "required": true,
          "example": "Mar",
          "notes": "3–7 chars: \"W36\", \"Sep\", \"Sprint 4\", \"Q1\". Mark the year change on the first column of the new year, e.g. \"Jan '27\"."
        }
      ]
    },
    {
      "name": "task",
      "description": "One task or workstream row: label, owner and a bar on the time grid. Order by start date and group by phase.",
      "min": 2,
      "max": 16,
      "slots": [
        {
          "name": "task-name",
          "type": "text",
          "required": true,
          "example": "Design freeze & building permit",
          "notes": "Under ~45 chars — the label column is narrow. Start with a verb or a deliverable."
        },
        {
          "name": "task-owner",
          "type": "text",
          "required": true,
          "example": "J. Bakker",
          "notes": "Initial + surname keeps the column narrow. One named person, never a team."
        },
        {
          "name": "task-bar-style",
          "type": "text",
          "required": true,
          "example": "left:0%;width:16.66%",
          "notes": "Attribute slot on the bar. With N periods: left = (start-1)x100/N %, width = (end-start+1)x100/N %. Only left and width — no other declarations."
        },
        {
          "name": "task-bar-class",
          "type": "text",
          "required": true,
          "example": "bar bar-done",
          "notes": "Attribute slot on the bar. Exactly one of: \"bar bar-plan\", \"bar bar-active\", \"bar bar-done\", \"bar bar-risk\". Must be consistent with the today marker."
        }
      ]
    },
    {
      "name": "milestone",
      "description": "A diamond marker on the milestone row, on a column boundary — phase gates, approvals, go-live.",
      "min": 1,
      "max": 8,
      "slots": [
        {
          "name": "milestone-style",
          "type": "text",
          "required": true,
          "example": "left:16.66%",
          "notes": "Attribute slot. Column boundary on the same scale as the bars: end of period P = P x 100/N %. Only left."
        },
        {
          "name": "milestone-label",
          "type": "text",
          "required": true,
          "example": "Permit granted",
          "notes": "Under ~22 chars — labels sit side by side and must not collide. Past participle reads best: \"Permit granted\"."
        }
      ]
    }
  ],
  "optionals": [
    {
      "name": "risks",
      "description": "Key risks & mitigations panel, bottom left. Remove when the user gives no risks — an empty panel is worse than none."
    },
    {
      "name": "assumptions",
      "description": "Assumptions & dependencies panel, bottom right. Remove when there is nothing the plan measurably depends on."
    }
  ],
  "changelog": [
    {
      "version": "0.1.0",
      "date": "2026-08-19",
      "notes": "Initial release: A4 landscape one-page project plan with a CSS-only Gantt chart, four bar states, today marker and milestone row."
    }
  ],
  "agentInstructions": "GEOMETRY IS THE JOB. With N period columns each column is 100/N %; 12 columns = 8.3333% each. For a task running from period 3 to period 6 inclusive: left = (3-1)x8.3333 = 16.66%, width = (6-3+1)x8.3333 = 33.33%, so task-bar-style is left:16.66%;width:33.33%. Compute every bar this way and check left+width never exceeds 100. task-bar-class must be exactly one of: \"bar bar-plan\", \"bar bar-active\", \"bar bar-done\", \"bar bar-risk\" — and must agree with the today marker (nothing left of today is still \"plan\"). today-style uses the same scale, e.g. mid-way through column 6 of 12 = left:46.8%. milestone-style lands on a column boundary: end of period P = P x 100/N %. Delete every data-example node — they are preview content only. Keep task-name under ~45 chars and milestone-label under ~22. Order task rows by start date and group them by phase. Max 16 tasks: if the plan has more, roll up to phase level rather than shrinking rows. THIS MUST STAY ONE LANDSCAPE PAGE — tighten wording, never edit the CSS. Dates as \"19 Aug 2026\", money as \"€ 4.500\"; bind both with &nbsp; so they never break across a line. Drop the risks and/or assumptions block when the user has none. Unknown dates or owners: write [PLACEHOLDER] and tell the user to fill them in with the built-in Edit button.",
  "license": "MIT",
  "authors": [
    {
      "github": "bvrln"
    }
  ]
}