SG Daily Essentials

\n {/* NOTES */}\n {active === \"notes\" && (\n

Quick notes

\n \n

\n                <button>Add note</button>\n              </form>\n              <ul className=\"list\">\n                {notes.map((n: any) => (\n                  <li key={n.id}>\n                    <span className=\"grow\">{n.text}</span>\n                    <form method=\"post\" action=\"/?t=notes\">\n                      <input type=\"hidden\" name=\"action\" value=\"delNote\" />\n                      <input type=\"hidden\" name=\"id\" value={n.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {notes.length === 0 && <p className=\"empty\">No notes yet.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* TO-DO */}\n          {active === \"todo\" && (\n            <section>\n              <h2>To-do list <small>{open} open</small></h2>\n              <form method=\"post\" action=\"/?t=todo\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"addTodo\" />\n                <input name=\"text\" placeholder=\"What needs doing?\" autoComplete=\"off\" required />\n                <input name=\"reminder\" type=\"datetime-local\" aria-label=\"Reminder date & time\" />\n                <button>Add</button>\n              </form>\n              <ul className=\"list\">\n                {todos.map((t: any) => (\n                  <li key={t.id} className={t.done ? \"done\" : isOverdue(t) ? \"overdue\" : \"\"}>\n                    <form method=\"post\" action=\"/?t=todo\" className=\"toggle\">\n                      <input type=\"hidden\" name=\"action\" value=\"toggleTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"check\">{t.done ? \"✓\" : \"\"}</button>\n                    </form>\n                    <div className=\"grow todobody\">\n                      <span>{t.text}</span>\n                      {t.reminder && (\n                        <small className={isOverdue(t) ? \"due-due\" : \"due\"}>\n                          {isOverdue(t) ? \"⏰ overdue · \" : \"reminder · \"}{fmtReminder(t.reminder)}\n                        </small>\n                      )}\n                    </div>\n                    <form method=\"post\" action=\"/?t=todo\">\n                      <input type=\"hidden\" name=\"action\" value=\"delTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {todos.length === 0 && <p className=\"empty\">Nothing on the list.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* DRAWINGS */}\n          {active === \"drawings\" && (\n            <section>\n              <h2>Shop drawing revisions</h2>\n              <details className=\"add\">\n                <summary>+ Add drawing / revision</summary>\n                <form method=\"post\" action=\"/?t=drawings\" className=\"grid\">\n                  <input type=\"hidden\" name=\"action\" value=\"addDraw\" />\n                  <input name=\"drawingNo\" placeholder=\"Drawing no. (e.g. A-101)\" required />\n                  <input name=\"client\" placeholder=\"Client\" />\n                  <input name=\"revision\" placeholder=\"Revision (A/B/C...)\" />\n                  <select name=\"status\">\n                    <option>draft</option><option>issued</option>\n                    <option>client review</option><option>approved</option>\n                  </select>\n                  <input name=\"dateIssued\" placeholder=\"Date issued (DD/MM/YYYY)\" />\n                  <textarea name=\"notes\" rows={2} placeholder=\"Notes\" />\n                  <button>Save</button>\n                </form>\n              </details>\n              <div className=\"drawcards\">\n                {drawings.map((d: any) => (\n                  <div className=\"card\" key={d.id}>\n                    <div className=\"cardhead\">\n                      <strong>{d.drawingNo}</strong>\n                      <span className=\"chip\" style={{ background: statusColor(d.status) }}>{d.status}</span>\n                    </div>\n                    <div className=\"row\"><b>Client:</b> {d.client || \"—\"}</div>\n                    <div className=\"row\"><b>Rev:</b> {d.revision || \"—\"}</div>\n                    <div className=\"row\"><b>Issued:</b> {d.dateIssued || \"—\"}</div>\n                    {d.notes && <div className=\"row note\">{d.notes}</div>}\n                    <form method=\"post\" action=\"/?t=drawings\">\n                      <input type=\"hidden\" name=\"action\" value=\"delDraw\" />\n                      <input type=\"hidden\" name=\"id\" value={d.id} />\n                      <button className=\"ghost\">Remove</button>\n                    </form>\n                  </div>\n                ))}\n                {drawings.length === 0 && <p className=\"empty\">No drawings tracked yet.</p>}\n              </div>\n            </section>\n          )}\n\n          {/* CALCULATOR */}\n          {active === \"calc\" && (\n            <section>\n              <h2>Calculator</h2>\n              <p className=\"empty\">\n                Calculator needs tiny client-side JS to be interactive. For now, quick server-side\n                sums: use the form below (e.g. <code>12+7</code>).\n              </p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"calc\" />\n                <input name=\"expr\" placeholder=\"Expression e.g. 12*7+3\" required />\n                <button>Compute</button>\n              </form>\n              {data.calcResult != null && <p className=\"result\">= {data.calcResult}</p>}\n\n              <h3 className=\"sub\">Area → square feet</h3>\n              <p className=\"hint\">Single value in m², or two dimensions (length × width).</p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"sqft\" />\n                <input name=\"v1\" type=\"number\" step=\"any\" placeholder=\"m² or length\" required />\n                <input name=\"v2\" type=\"number\" step=\"any\" placeholder=\"width in m (optional)\" />\n                <button>To square feet</button>\n              </form>\n              {data.sqftResult && <p className=\"result\">{data.sqftResult}</p>}\n            </section>\n          )}\n\n          {/* CONVERTER */}\n          {active === \"convert\" && (\n            <section>\n              <h2>Metric unit converter</h2>\n              <form method=\"post\" action=\"/?t=convert\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"convert\" />\n                <input name=\"value\" type=\"number\" step=\"any\" placeholder=\"Value\" required />\n                <select name=\"from\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <span className=\"convto\">→</span>\n                <select name=\"to\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <button>Convert</button>\n              </form>\n              {data.convertResult && <p className=\"result\">{data.convertResult}</p>}\n            </section>\n          )}\n        </main>\n\n        <footer>\n          Data persists on your val's server (std/blob). Works great on mobile.\n        </footer>\n      </body>\n    </html>\n  );\n}\n\n// ---------- mutations & conversions ----------\nconst TO_M: Record<string, number> = { mm: 0.001, cm: 0.01, m: 1, km: 1000, g: 0.001, kg: 1, t: 1000 };\n\nasync function applyMutation(data: any, form: Record<string, string>) {\n  const a = form.action;\n  const id = () => Math.random().toString(36).slice(2, 9);\n\n  if (a === \"addNote\") data.notes.unshift({ id: id(), text: (form.text || \"\").trim() });\n  else if (a === \"delNote\") data.notes = data.notes.filter((n: any) => n.id !== form.id);\n  else if (a === \"addTodo\") data.todos.unshift({ id: id(), text: (form.text || \"\").trim(), done: false, reminder: (form.reminder || \"\").trim() || undefined });\n  else if (a === \"delTodo\") data.todos = data.todos.filter((t: any) => t.id !== form.id);\n  else if (a === \"toggleTodo\")\n    data.todos = data.todos.map((t: any) => (t.id === form.id ? { ...t, done: !t.done } : t));\n  else if (a === \"addDraw\")\n    data.drawings.push({\n      id: id(), drawingNo: (form.drawingNo || \"\").trim(), client: (form.client || \"\").trim(),\n      revision: (form.revision || \"\").trim(), status: (form.status || \"draft\").trim(),\n      dateIssued: (form.dateIssued || \"\").trim(), notes: (form.notes || \"\").trim(),\n    });\n  else if (a === \"delDraw\") data.drawings = data.drawings.filter((d: any) => d.id !== form.id);\n  else if (a === \"convert\") {\n    const v = Number(form.value);\n    if (isNaN(v)) data.convertResult = \"Enter a number.\";\n    else {\n      const from = TO_M[form.from] ?? 1, to = TO_M[form.to] ?? 1;\n      data.convertResult = `${v} ${form.from} = ${Number((v * from / to).toFixed(6))} ${form.to}`;\n    }\n  } else if (a === \"calc\") {\n    const expr = (form.expr || \"\").replace(/[^0-9+\\-*/(). ]/g, \"\").trim();\n    try { data.calcResult = String(Function(`\"use strict\"; return (${expr || \"0\"})`)()); }\n    catch { data.calcResult = \"Invalid expression\"; }\n  } else if (a === \"sqft\") {\n    const v1 = Number(form.v1);\n    const v2 = form.v2 ? Number(form.v2) : null;\n    if (isNaN(v1) || (form.v2 && isNaN(v2 as number))) data.sqftResult = \"Enter valid numbers.\";\n    else {\n      const areaM2 = (v2 == null ? v1 : v1 * (v2 as number)); // m²\n      const sqft = areaM2 * 10.7639;\n      data.sqftResult = `${v2 == null ? `${v1} m²` : `${v1} m × ${v2} m`} = ${Number(sqft.toFixed(2))} sq ft`;\n    }\n  }\n  return data;\n}\n\n// ---------- HTTP entrypoint ----------\nexport default async function handler(req: Request) {\n  const url = new URL(req.url);\n\n  if (url.pathname === \"/style.css\") {\n    const css = `\n      * { box-sizing: border-box; }\n      body { font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; margin: 0;\n             background: #f6f7f8; color: #1c1c1c; line-height: 1.5; }\n      header { background: #1a2b3c; color: #fff; padding: 1rem 1.25rem; }\n      header h1 { margin: 0; font-size: 1.2rem; }\n      header .date { font-size: .85rem; opacity: .8; margin-top: .25rem; display: block; }\n      nav.tabs { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #e3e5e8; }\n      nav.tabs a { padding: .8rem 1rem; text-decoration: none; color: #555; white-space: nowrap; font-weight: 600; }\n      nav.tabs a.active { color: #1a2b3c; box-shadow: inset 0 -3px 0 #1a2b3c; }\n      main { max-width: 640px; margin: 0 auto; padding: 1.25rem; }\n      h2 { font-size: 1.05rem; margin: 0 0 .9rem; }\n      h2 small { color: #888; font-weight: 400; }\n      form { display: flex; gap: .5rem; margin-bottom: 1rem; }\n      form.grid { flex-wrap: wrap; }\n      form.toggle { margin: 0; padding: 0; }\n      input, select, textarea, button {\n        font: inherit; padding: .65rem .7rem; border-radius: 8px; border: 1px solid #cfd4d8; }\n      input, select, textarea { flex: 1; min-width: 120px; background: #fff; }\n      textarea { resize: vertical; }\n      button { background: #1a2b3c; color: #fff; border: none; cursor: pointer; font-weight: 600; }\n      button.ghost { background: transparent; color: #888; border: 1px solid #e3e5e8; padding: .2rem .55rem; flex: 0; }\n      button.check { background: transparent; border: 2px solid #cfd4d8; width: 1.5rem; height: 1.5rem;\n                     padding: 0; border-radius: 50%; color: #2e7d32; font-weight: 800; flex: 0; }\n      ul.list { list-style: none; margin: 0; padding: 0; }\n      ul.list li { display: flex; align-items: center; gap: .6rem; background: #fff;\n                   border: 1px solid #e3e5e8; padding: .6rem .8rem; margin-bottom: .5rem; border-radius: 8px; }\n      ul.list li .grow { flex: 1; }\n      ul.list li.done .grow { text-decoration: line-through; color: #888; }\n      ul.list li.overdue { border-color: #d32f2f; background: #fff5f5; }\n      .todobody { display: flex; flex-direction: column; line-height: 1.3; }\n      .todobody small { font-size: .75rem; }\n      .todobody .due { color: #888; }\n      .todobody .due-due { color: #d32f2f; font-weight: 600; }\n      h3.sub { font-size: .95rem; margin: 1.2rem 0 .3rem; }\n      .empty, .hint { color: #888; font-size: .9rem; }\n      details.add { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }\n      details.add summary { cursor: pointer; font-weight: 600; }\n      details.add form { margin-top: .7rem; margin-bottom: 0; }\n      .drawcards { display: grid; gap: .6rem; }\n      .card { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .8rem; }\n      .cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }\n      .chip { color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; }\n      .row { font-size: .9rem; }\n      .row.note { color: #555; margin-top: .2rem; }\n      .convto { align-self: center; color: #888; }\n      .result { font-weight: 700; }\n      footer { text-align: center; color: #a0a6ab; font-size: .8rem; padding: 1.5rem; }\n      @media (max-width: 480px){ form{ flex-wrap: wrap; } input,select,textarea,button{ min-width:100%; } }\n    `;\n    return new Response(css, { headers: { \"content-type\": \"text/css; charset=utf-8\" } });\n  }\n\n  let data = await loadData();\n  if (req.method === \"POST\") {\n    const form = await parseRequest(req);\n    const kv: Record<string, string> = {};\n    for (const [k, v] of Object.entries(form)) kv[k] = Array.isArray(v) ? v[0] : String(v);\n    data = await applyMutation(data, kv);\n    await saveData(data);\n    const t = url.searchParams.get(\"t\") || \"notes\";\n    return Response.redirect(`${url.origin}/?t=${t}`, 303);\n  }\n\n  const active = url.searchParams.get(\"t\") || \"notes\";\n  const html = \"<!doctype html>\" + renderToStaticMarkup(React.createElement(Page, { data, active }));\n  return new Response(html, { headers: { \"content-type\": \"text/html; charset=utf-8\" } });\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\n// ---------- persistence (server-side, survives sessions) ----------\nconst KEY = \"sg-daily-essentials\";\nconst DEFAULT = { notes: [], todos: [], drawings: [] };\n\nasync function loadData() {\n  return (await blob.getJSON(KEY)) || { ...DEFAULT };\n}\nasync function saveData(data: any) {\n  await blob.setJSON(KEY, data);\n}\n\n// ---------- helpers ----------\nfunction todaySG() {\n  // Asia/Singapore date, DD/MM/YYYY\n  return new Intl.DateTimeFormat(\"en-SG\", {\n    day: \"2-digit\", month: \"2-digit\", year: \"numeric\", timeZone: \"Asia/Singapore\",\n  }).format(new Date());\n}\n\nconst NAV = [\n  [\"notes\", \"Notes\"],\n  [\"todo\", \"To-do\"],\n  [\"drawings\", \"Drawing revisions\"],\n  [\"calc\", \"Calculator\"],\n  [\"convert\", \"Converter\"],\n];\n\nfunction statusColor(s: string) {\n  return ({\n    draft: \"#9aa0a6\", issued: \"#1976d2\", \"client review\": \"#ed6c02\", approved: \"#2e7d32\",\n  } as any)[(s || \"\").toLowerCase()] || \"#9aa0a6\";\n}\n\n// Reminder helpers. Stored reminders are \"YYYY-MM-DDTHH:MM\" interpreted as\n// Asia/Singapore time. Display in SG, and flag once the moment has passed.\nfunction parseSGReminder(rem: string | undefined): Date | null {\n  if (!rem) return null;\n  const d = new Date(rem.endsWith(\"+08:00\") || rem.endsWith(\"Z\") ? rem : rem + \"+08:00\");\n  return isNaN(d.getTime()) ? null : d;\n}\nfunction fmtReminder(rem: string | undefined): string {\n  const d = parseSGReminder(rem);\n  if (!d) return \"\";\n  return new Intl.DateTimeFormat(\"en-SG\", {\n    day: \"2-digit\", month: \"short\", year: \"numeric\", hour: \"2-digit\", minute: \"2-digit\",\n    timeZone: \"Asia/Singapore\",\n  }).format(d);\n}\nfunction isOverdue(todo: any): boolean {\n  if (todo.done) return false;\n  const d = parseSGReminder(todo.reminder);\n  return !!d && d.getTime() < Date.now();\n}\n\n// ---------- UI ----------\nfunction Page({ data, active }: any) {\n  const todos = data.todos || [];\n  const open = todos.filter((t: any) => !t.done).length;\n  const notes = data.notes || [];\n  const drawings = (data.drawings || [])\n    .slice()\n    .sort((a: any, b: any) => {\n      const aa = a.dateIssued.replace(/\\//g, \"\");\n      const bb = b.dateIssued.replace(/\\//g, \"\");\n      return aa < bb ? 1 : aa > bb ? -1 : 0;\n    });\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <title>SG Daily Essentials</title>\n        <link rel=\"stylesheet\" href=\"/style.css\" />\n      </head>\n      <body>\n        <header>\n          <h1>SG Daily Essentials</h1>\n          <span className=\"date\">{todaySG()}</span>\n        </header>\n\n        <nav className=\"tabs\">\n          {NAV.map(([id, label]) => (\n            <a key={id} href={\"/?t=\" + id} className={active === id ? \"active\" : \"\"}>{label}</a>\n          ))}\n        </nav>\n\n        <main>\n          {/* NOTES */}\n          {active === \"notes\" && (\n            <section>\n              <h2>Quick notes</h2>\n              <form method=\"post\" action=\"/?t=notes\">\n                <input type=\"hidden\" name=\"action\" value=\"addNote\" />\n                <textarea name=\"text\" rows={2} placeholder=\"Type a note...\" required />\n                <button>Add note</button>\n              </form>\n              <ul className=\"list\">\n                {notes.map((n: any) => (\n                  <li key={n.id}>\n                    <span className=\"grow\">{n.text}</span>\n                    <form method=\"post\" action=\"/?t=notes\">\n                      <input type=\"hidden\" name=\"action\" value=\"delNote\" />\n                      <input type=\"hidden\" name=\"id\" value={n.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {notes.length === 0 && <p className=\"empty\">No notes yet.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* TO-DO */}\n          {active === \"todo\" && (\n            <section>\n              <h2>To-do list <small>{open} open</small></h2>\n              <form method=\"post\" action=\"/?t=todo\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"addTodo\" />\n                <input name=\"text\" placeholder=\"What needs doing?\" autoComplete=\"off\" required />\n                <input name=\"reminder\" type=\"datetime-local\" aria-label=\"Reminder date & time\" />\n                <button>Add</button>\n              </form>\n              <ul className=\"list\">\n                {todos.map((t: any) => (\n                  <li key={t.id} className={t.done ? \"done\" : isOverdue(t) ? \"overdue\" : \"\"}>\n                    <form method=\"post\" action=\"/?t=todo\" className=\"toggle\">\n                      <input type=\"hidden\" name=\"action\" value=\"toggleTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"check\">{t.done ? \"✓\" : \"\"}</button>\n                    </form>\n                    <div className=\"grow todobody\">\n                      <span>{t.text}</span>\n                      {t.reminder && (\n                        <small className={isOverdue(t) ? \"due-due\" : \"due\"}>\n                          {isOverdue(t) ? \"⏰ overdue · \" : \"reminder · \"}{fmtReminder(t.reminder)}\n                        </small>\n                      )}\n                    </div>\n                    <form method=\"post\" action=\"/?t=todo\">\n                      <input type=\"hidden\" name=\"action\" value=\"delTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {todos.length === 0 && <p className=\"empty\">Nothing on the list.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* DRAWINGS */}\n          {active === \"drawings\" && (\n            <section>\n              <h2>Shop drawing revisions</h2>\n              <details className=\"add\">\n                <summary>+ Add drawing / revision</summary>\n                <form method=\"post\" action=\"/?t=drawings\" className=\"grid\">\n                  <input type=\"hidden\" name=\"action\" value=\"addDraw\" />\n                  <input name=\"drawingNo\" placeholder=\"Drawing no. (e.g. A-101)\" required />\n                  <input name=\"client\" placeholder=\"Client\" />\n                  <input name=\"revision\" placeholder=\"Revision (A/B/C...)\" />\n                  <select name=\"status\">\n                    <option>draft</option><option>issued</option>\n                    <option>client review</option><option>approved</option>\n                  </select>\n                  <input name=\"dateIssued\" placeholder=\"Date issued (DD/MM/YYYY)\" />\n                  <textarea name=\"notes\" rows={2} placeholder=\"Notes\" />\n                  <button>Save</button>\n                </form>\n              </details>\n              <div className=\"drawcards\">\n                {drawings.map((d: any) => (\n                  <div className=\"card\" key={d.id}>\n                    <div className=\"cardhead\">\n                      <strong>{d.drawingNo}</strong>\n                      <span className=\"chip\" style={{ background: statusColor(d.status) }}>{d.status}</span>\n                    </div>\n                    <div className=\"row\"><b>Client:</b> {d.client || \"—\"}</div>\n                    <div className=\"row\"><b>Rev:</b> {d.revision || \"—\"}</div>\n                    <div className=\"row\"><b>Issued:</b> {d.dateIssued || \"—\"}</div>\n                    {d.notes && <div className=\"row note\">{d.notes}</div>}\n                    <form method=\"post\" action=\"/?t=drawings\">\n                      <input type=\"hidden\" name=\"action\" value=\"delDraw\" />\n                      <input type=\"hidden\" name=\"id\" value={d.id} />\n                      <button className=\"ghost\">Remove</button>\n                    </form>\n                  </div>\n                ))}\n                {drawings.length === 0 && <p className=\"empty\">No drawings tracked yet.</p>}\n              </div>\n            </section>\n          )}\n\n          {/* CALCULATOR */}\n          {active === \"calc\" && (\n            <section>\n              <h2>Calculator</h2>\n              <p className=\"empty\">\n                Calculator needs tiny client-side JS to be interactive. For now, quick server-side\n                sums: use the form below (e.g. <code>12+7</code>).\n              </p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"calc\" />\n                <input name=\"expr\" placeholder=\"Expression e.g. 12*7+3\" required />\n                <button>Compute</button>\n              </form>\n              {data.calcResult != null && <p className=\"result\">= {data.calcResult}</p>}\n\n              <h3 className=\"sub\">Area → square feet</h3>\n              <p className=\"hint\">Single value in m², or two dimensions (length × width).</p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"sqft\" />\n                <input name=\"v1\" type=\"number\" step=\"any\" placeholder=\"m² or length\" required />\n                <input name=\"v2\" type=\"number\" step=\"any\" placeholder=\"width in m (optional)\" />\n                <button>To square feet</button>\n              </form>\n              {data.sqftResult && <p className=\"result\">{data.sqftResult}</p>}\n            </section>\n          )}\n\n          {/* CONVERTER */}\n          {active === \"convert\" && (\n            <section>\n              <h2>Metric unit converter</h2>\n              <form method=\"post\" action=\"/?t=convert\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"convert\" />\n                <input name=\"value\" type=\"number\" step=\"any\" placeholder=\"Value\" required />\n                <select name=\"from\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <span className=\"convto\">→</span>\n                <select name=\"to\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <button>Convert</button>\n              </form>\n              {data.convertResult && <p className=\"result\">{data.convertResult}</p>}\n            </section>\n          )}\n        </main>\n\n        <footer>\n          Data persists on your val's server (std/blob). Works great on mobile.\n        </footer>\n      </body>\n    </html>\n  );\n}\n\n// ---------- mutations & conversions ----------\nconst TO_M: Record<string, number> = { mm: 0.001, cm: 0.01, m: 1, km: 1000, g: 0.001, kg: 1, t: 1000 };\n\nasync function applyMutation(data: any, form: Record<string, string>) {\n  const a = form.action;\n  const id = () => Math.random().toString(36).slice(2, 9);\n\n  if (a === \"addNote\") data.notes.unshift({ id: id(), text: (form.text || \"\").trim() });\n  else if (a === \"delNote\") data.notes = data.notes.filter((n: any) => n.id !== form.id);\n  else if (a === \"addTodo\") data.todos.unshift({ id: id(), text: (form.text || \"\").trim(), done: false, reminder: (form.reminder || \"\").trim() || undefined });\n  else if (a === \"delTodo\") data.todos = data.todos.filter((t: any) => t.id !== form.id);\n  else if (a === \"toggleTodo\")\n    data.todos = data.todos.map((t: any) => (t.id === form.id ? { ...t, done: !t.done } : t));\n  else if (a === \"addDraw\")\n    data.drawings.push({\n      id: id(), drawingNo: (form.drawingNo || \"\").trim(), client: (form.client || \"\").trim(),\n      revision: (form.revision || \"\").trim(), status: (form.status || \"draft\").trim(),\n      dateIssued: (form.dateIssued || \"\").trim(), notes: (form.notes || \"\").trim(),\n    });\n  else if (a === \"delDraw\") data.drawings = data.drawings.filter((d: any) => d.id !== form.id);\n  else if (a === \"convert\") {\n    const v = Number(form.value);\n    if (isNaN(v)) data.convertResult = \"Enter a number.\";\n    else {\n      const from = TO_M[form.from] ?? 1, to = TO_M[form.to] ?? 1;\n      data.convertResult = `${v} ${form.from} = ${Number((v * from / to).toFixed(6))} ${form.to}`;\n    }\n  } else if (a === \"calc\") {\n    const expr = (form.expr || \"\").replace(/[^0-9+\\-*/(). ]/g, \"\").trim();\n    try { data.calcResult = String(Function(`\"use strict\"; return (${expr || \"0\"})`)()); }\n    catch { data.calcResult = \"Invalid expression\"; }\n  } else if (a === \"sqft\") {\n    const v1 = Number(form.v1);\n    const v2 = form.v2 ? Number(form.v2) : null;\n    if (isNaN(v1) || (form.v2 && isNaN(v2 as number))) data.sqftResult = \"Enter valid numbers.\";\n    else {\n      const areaM2 = (v2 == null ? v1 : v1 * (v2 as number)); // m²\n      const sqft = areaM2 * 10.7639;\n      data.sqftResult = `${v2 == null ? `${v1} m²` : `${v1} m × ${v2} m`} = ${Number(sqft.toFixed(2))} sq ft`;\n    }\n  }\n  return data;\n}\n\n// ---------- HTTP entrypoint ----------\nexport default async function handler(req: Request) {\n  const url = new URL(req.url);\n\n  if (url.pathname === \"/style.css\") {\n    const css = `\n      * { box-sizing: border-box; }\n      body { font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; margin: 0;\n             background: #f6f7f8; color: #1c1c1c; line-height: 1.5; }\n      header { background: #1a2b3c; color: #fff; padding: 1rem 1.25rem; }\n      header h1 { margin: 0; font-size: 1.2rem; }\n      header .date { font-size: .85rem; opacity: .8; margin-top: .25rem; display: block; }\n      nav.tabs { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #e3e5e8; }\n      nav.tabs a { padding: .8rem 1rem; text-decoration: none; color: #555; white-space: nowrap; font-weight: 600; }\n      nav.tabs a.active { color: #1a2b3c; box-shadow: inset 0 -3px 0 #1a2b3c; }\n      main { max-width: 640px; margin: 0 auto; padding: 1.25rem; }\n      h2 { font-size: 1.05rem; margin: 0 0 .9rem; }\n      h2 small { color: #888; font-weight: 400; }\n      form { display: flex; gap: .5rem; margin-bottom: 1rem; }\n      form.grid { flex-wrap: wrap; }\n      form.toggle { margin: 0; padding: 0; }\n      input, select, textarea, button {\n        font: inherit; padding: .65rem .7rem; border-radius: 8px; border: 1px solid #cfd4d8; }\n      input, select, textarea { flex: 1; min-width: 120px; background: #fff; }\n      textarea { resize: vertical; }\n      button { background: #1a2b3c; color: #fff; border: none; cursor: pointer; font-weight: 600; }\n      button.ghost { background: transparent; color: #888; border: 1px solid #e3e5e8; padding: .2rem .55rem; flex: 0; }\n      button.check { background: transparent; border: 2px solid #cfd4d8; width: 1.5rem; height: 1.5rem;\n                     padding: 0; border-radius: 50%; color: #2e7d32; font-weight: 800; flex: 0; }\n      ul.list { list-style: none; margin: 0; padding: 0; }\n      ul.list li { display: flex; align-items: center; gap: .6rem; background: #fff;\n                   border: 1px solid #e3e5e8; padding: .6rem .8rem; margin-bottom: .5rem; border-radius: 8px; }\n      ul.list li .grow { flex: 1; }\n      ul.list li.done .grow { text-decoration: line-through; color: #888; }\n      ul.list li.overdue { border-color: #d32f2f; background: #fff5f5; }\n      .todobody { display: flex; flex-direction: column; line-height: 1.3; }\n      .todobody small { font-size: .75rem; }\n      .todobody .due { color: #888; }\n      .todobody .due-due { color: #d32f2f; font-weight: 600; }\n      h3.sub { font-size: .95rem; margin: 1.2rem 0 .3rem; }\n      .empty, .hint { color: #888; font-size: .9rem; }\n      details.add { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }\n      details.add summary { cursor: pointer; font-weight: 600; }\n      details.add form { margin-top: .7rem; margin-bottom: 0; }\n      .drawcards { display: grid; gap: .6rem; }\n      .card { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .8rem; }\n      .cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }\n      .chip { color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; }\n      .row { font-size: .9rem; }\n      .row.note { color: #555; margin-top: .2rem; }\n      .convto { align-self: center; color: #888; }\n      .result { font-weight: 700; }\n      footer { text-align: center; color: #a0a6ab; font-size: .8rem; padding: 1.5rem; }\n      @media (max-width: 480px){ form{ flex-wrap: wrap; } input,select,textarea,button{ min-width:100%; } }\n    `;\n    return new Response(css, { headers: { \"content-type\": \"text/css; charset=utf-8\" } });\n  }\n\n  let data = await loadData();\n  if (req.method === \"POST\") {\n    const form = await parseRequest(req);\n    const kv: Record<string, string> = {};\n    for (const [k, v] of Object.entries(form)) kv[k] = Array.isArray(v) ? v[0] : String(v);\n    data = await applyMutation(data, kv);\n    await saveData(data);\n    const t = url.searchParams.get(\"t\") || \"notes\";\n    return Response.redirect(`${url.origin}/?t=${t}`, 303);\n  }\n\n  const active = url.searchParams.get(\"t\") || \"notes\";\n  const html = \"<!doctype html>\" + renderToStaticMarkup(React.createElement(Page, { data, active }));\n  return new Response(html, { headers: { \"content-type\": \"text/html; charset=utf-8\" } });\n}\n","createdAt",["D",1788682161616],"branchVersion","branchId","da028264-7738-4d97-b35c-1b8a7cc1e638","id","dc7d69d2-d372-4ffe-9977-a8323545b5fc","sg-daily-essentials",["D",1788681365582],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Dashboard: notes, todo, shop revisions, calculator, converter","imageUrl","154bd18b-7d4f-4fa6-8bd0-2f7e3c8c7ba9","pinnedFileId","6ca1d14c-a9c8-11f1-a359-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a075b4-9379-748a-a15a-cd0ade8c9887","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_19":61,"_108":109,"_110":31},"branch",{"_13":92,"_38":93,"_49":48,"_94":50,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":51,"_101":102},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Wils","handle","displayName","Toh Wilson","avatar","https://lh3.googleusercontent.com/a/ACg8ocKFn0_L6dfakCj_okZDw_69VkVaajvYmaDE27lggN3LDZW7=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":169,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":170,"_87":171,"_89":172,"_91":31},"tree",[160,161],"files",[160,161],"counts",{"_150":69,"_151":146,"_152":69,"_153":154,"_155":156},"contents",[134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":144,"_38":145,"_36":63,"_137":-5,"_47":48,"_46":146,"_138":65,"_44":147,"_13":69,"_39":40,"_41":148,"_30":31,"_141":-5,"_33":149},{"_49":136,"_38":34,"_36":37,"_137":-5,"_47":48,"_46":14,"_138":31,"_44":139,"_13":140,"_39":40,"_41":43,"_30":31,"_141":142,"_33":143},"bbb56e28-ec01-471b-8a07-1a7ce597bbe6","parentId","latest",["D",1788682161616],8,"label","sg-essentials",[34],"846810ce-1e42-4e5f-b335-de4df9153c60","index.ts",1,["D",1788681370604],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\n\n// ---------- persistence ----------\n// Single JSON doc in blob storage; read/write with a light guard against\n// concurrent saves. No browser storage (unsupported), so data lives server-side.\nconst KEY = \"sg-daily-essentials-data\";\nlet savePromise = Promise.resolve();\n\nasync function load(): Promise<any> {\n  for (let i = 0; i < 5; i++) {\n    try {\n      const raw = await Deno.env.get(\"README\") ? null : await fetch(\n        `https://blob.deno.dev?${KEY}`,\n      ).then((r) => (r.ok ? r.json() : null));\n      return raw && typeof raw === \"object\" ? raw : { notes: [], todos: [], drawings: [] };\n    } catch {\n      // fall through\n    }\n  }\n  return { notes: [], todos: [], drawings: [] };\n}\n\n// We'll use a tiny persisted state object imported at the top.\n",[145],"pulls","branches","forks","envVars",{"_157":69,"_159":69},"connections",{"_157":69,"_158":69},"count","unfilledCount","emptyCount",{"_49":144,"_38":145,"_36":63,"_137":-5,"_47":48,"_46":146,"_138":65,"_44":166,"_13":69,"_39":40,"_41":148,"_30":31,"_141":-5,"_163":167,"_33":168},{"_49":136,"_38":34,"_36":37,"_137":-5,"_47":48,"_46":14,"_138":31,"_44":162,"_13":140,"_39":40,"_41":43,"_30":31,"_141":142,"_163":164,"_33":165},["D",1788682161616],"children",[],[34],["D",1788681370604],[],[145],["D",1788681365582],{"_103":102,"_111":107},{"_103":102,"_104":105,"_106":107,"_19":61,"_108":109,"_110":31},{"_13":92,"_38":93,"_49":48,"_94":50,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":51,"_101":102},"ctx",{"_85":-5,"_131":206,"_207":208,"_209":210,"_211":31,"_212":31,"_213":31,"_214":65,"_215":-5,"_216":-7,"_217":-7,"_218":69,"_219":31,"_220":31,"_221":-5,"_222":31,"_223":31,"_224":31,"_225":-5},"ENV",{"_177":178,"_179":180,"_181":93,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v10