{
  "id": "tide-table-report",
  "name": "Report Builder",
  "theme": "tide-table",
  "category": "Settings & Forms",
  "description": "A form for defining a recurring report where the resulting sentence is written out in full underneath, so the settings can be checked by reading rather than by re-deriving them.",
  "layout": "A two-column form at 980px with a persistent plain-English summary sentence pinned beneath the fields and above the submit.",
  "modules": [
    {
      "key": "head",
      "name": "Form head",
      "html": "\n<header class=\"fh\"><span class=\"k\">Reports</span><h1>New recurring report</h1><p>Reports are generated at the end of the selected period and sent as a signed PDF with the raw series attached as CSV.</p></header>"
    },
    {
      "key": "fields",
      "name": "Field set",
      "html": "\n<div class=\"fg\">\n  <label>Report name<input type=\"text\" value=\"Orkney weekly surge\"></label>\n  <label>Stations<select><option>Orkney — all 9 stations</option><option>Selected stations…</option></select></label>\n  <label>Period<select><option>Weekly, ending Sunday</option><option>Daily</option><option>Monthly</option></select></label>\n  <label>Measure<select><option>Surge against prediction</option><option>Observed height</option><option>Range</option></select></label>\n  <label>Threshold<input type=\"text\" value=\"0.40\"><span class=\"u\">metres</span></label>\n  <label>Send to<input type=\"email\" value=\"harbour.notices@example.org\"></label>\n</div>"
    },
    {
      "key": "summary",
      "name": "Plain summary",
      "html": "\n<p class=\"sm\">Every <b>Sunday at 23:59 UTC</b>, generate <b>Orkney weekly surge</b> covering <b>all 9 Orkney stations</b>, flagging any reading where <b>surge against prediction</b> exceeds <b>0.40 m</b>, and send it to <b>harbour.notices@example.org</b>.</p>"
    },
    {
      "key": "actions",
      "name": "Actions",
      "html": "\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Create report</button><button type=\"button\" class=\"sec\">Preview last week</button><span class=\"m\">Existing reports are not affected.</span></div>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tide-table-report",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:34:56+09:00",
    "updatedAt": "2026-09-01T23:34:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/tide-table-report.json",
  "structure": "A two-column form at 980px with a persistent plain-English summary sentence pinned beneath the fields and above the submit.",
  "html": "<div class=\"dz dz-tide-table-report\" data-design=\"tide-table-report\" data-theme=\"tide-table\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Form head\">\n<header class=\"fh\"><span class=\"k\">Reports</span><h1>New recurring report</h1><p>Reports are generated at the end of the selected period and sent as a signed PDF with the raw series attached as CSV.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"fields\" aria-label=\"Field set\">\n<div class=\"fg\">\n  <label>Report name<input type=\"text\" value=\"Orkney weekly surge\"></label>\n  <label>Stations<select><option>Orkney — all 9 stations</option><option>Selected stations…</option></select></label>\n  <label>Period<select><option>Weekly, ending Sunday</option><option>Daily</option><option>Monthly</option></select></label>\n  <label>Measure<select><option>Surge against prediction</option><option>Observed height</option><option>Range</option></select></label>\n  <label>Threshold<input type=\"text\" value=\"0.40\"><span class=\"u\">metres</span></label>\n  <label>Send to<input type=\"email\" value=\"harbour.notices@example.org\"></label>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Plain summary\">\n<p class=\"sm\">Every <b>Sunday at 23:59 UTC</b>, generate <b>Orkney weekly surge</b> covering <b>all 9 Orkney stations</b>, flagging any reading where <b>surge against prediction</b> exceeds <b>0.40 m</b>, and send it to <b>harbour.notices@example.org</b>.</p></section>\n<section class=\"dz-mod\" data-mod=\"actions\" aria-label=\"Actions\">\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Create report</button><button type=\"button\" class=\"sec\">Preview last week</button><span class=\"m\">Existing reports are not affected.</span></div></section>\n</div>",
  "css": "\n.dz-tide-table-report { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 28px; max-width: 980px; margin: 0 auto; }\n.dz-tide-table-report .fh { padding-bottom: 18px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }\n.dz-tide-table-report .k { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-tide-table-report h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 500; margin: 4px 0 10px; letter-spacing: -.02em; }\n.dz-tide-table-report .fh p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; max-width: 70ch; line-height: 1.6; }\n.dz-tide-table-report .fg { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }\n.dz-tide-table-report label { display: block; font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); position: relative; }\n.dz-tide-table-report input, .dz-tide-table-report select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 14.5px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); text-transform: none; letter-spacing: 0; font-weight: 400; }\n.dz-tide-table-report .u { position: absolute; right: 12px; bottom: 12px; font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); text-transform: none; letter-spacing: 0; }\n.dz-tide-table-report .sm { margin: 26px 0 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.7; max-width: 70ch; }\n.dz-tide-table-report .sm b { font-weight: 600; }\n.dz-tide-table-report .ac { display: flex; align-items: center; gap: 14px; margin-top: 22px; }\n.dz-tide-table-report button { font: inherit; font-size: 14px; padding: 10px 18px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-tide-table-report .pri { background: var(--primary); color: var(--primary-foreground); border: 1px solid var(--primary); }\n.dz-tide-table-report .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-tide-table-report .m { font-size: 12.5px; color: var(--muted-foreground); }\n",
  "requiredTheme": "/api/v1/themes/tide-table.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inconsolata:wght@400;500;600;700&display=swap"
}