SemanticUI::Render
------------------------------- Render -------------------------------------
Constants
BASE_TEMPLATE = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>%TITLE%</title>\n #{HTMX}\n <style>%CSS%</style>\n </head>\n <body>\n <div class=\"header\">\n <div class=\"max\">\n <div class=\"toolbar\">\n %CHROME%\n <span class=\"spacer\"></span>\n <span class=\"small\">Server‑driven (semantic)</span>\n </div>\n </div>\n </div>\n\n <div class=\"main\">\n <div class=\"max grid\">\n <div class=\"content\">\n <div class=\"card\">%HEADER%</div>\n <div class=\"card\">%MAIN%</div>\n </div>\n <aside>\n <div class=\"card\">%SIDEBAR%</div>\n </aside>\n </div>\n </div>\n\n <footer class=\"max\">\n <div class=\"small muted\">%FOOTER%</div>\n </footer>\n </body>\n</html>"
CSS_TEMPLATE = ":root{ --gap:14px; --radius:14px; --border:#e5e7eb; --bg:#ffffff; --muted:#6b7280 }\n*{ box-sizing:border-box }\nbody{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:#f6f7f9 }\n.header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:var(--bg) }\n.max{ max-width:%MAX_WIDTH%; margin:0 auto; padding:12px 16px }\n.toolbar{ display:flex; gap:var(--gap); align-items:center }\n.toolbar .spacer{ flex:1 }\n.grid{ display:grid; grid-template-columns:1fr %SIDEBAR_WIDTH%; gap:var(--gap); align-items:start }\n.main{ padding:20px 16px }\n.card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px }\n.h1{ font-size:28px; font-weight:700; margin:0 0 6px }\n.h2{ font-size:20px; font-weight:600; margin:0 0 6px }\n.h3{ font-size:16px; font-weight:600; margin:0 0 6px; color:#374151 }\n.p{ margin:6px 0; color:#111827 }\n.muted{ color:var(--muted) }\n.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer }\n.btn:hover{ background:#fafafa }\n.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }\n.stat{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:12px }\n.stat .label{ color:var(--muted) }\n.input{ padding:10px 12px; border:1px solid var(--border); border-radius:12px; min-width:0 }\n.divider{ height:1px; background:var(--border); margin:10px 0 }\n.small{ font-size:12px; color:var(--muted) }"
HTMX = "<script src=\"https://unpkg.com/htmx.org@1.9.12\"></script>"