@mugwork/mug 0.1.0

package/dist/packages/surface-renderer/src/portal-renderer.js

@@ -0,0 +1,1089 @@
+import { esc, renderForm, renderMetaTags } from "./form-renderer.js";
+export function bindUserParam(sql, session) {
+    const user = session?.email ?? session?.phone ?? "";
+    const params = [];
+    const bound = sql.replace(/:auth\.(\w+)|:user/g, (match, col) => {
+        if (col) {
+            params.push(String(session?.authRow?.[col] ?? ""));
+        }
+        else {
+            params.push(user);
+        }
+        return "?";
+    });
+    return { sql: bound, userParams: params };
+}
+export function paginateQuery(sql, userParams, page, pageSize) {
+    const offset = (page - 1) * pageSize;
+    return {
+        countSql: `SELECT COUNT(*) as total FROM (${sql})`,
+        dataSql: `SELECT * FROM (${sql}) LIMIT ? OFFSET ?`,
+        countParams: [...userParams],
+        dataParams: [...userParams, pageSize, offset],
+    };
+}
+export function detailQuery(sql, userParams, primaryKey, rowId) {
+    return {
+        sql: `SELECT * FROM (${sql}) WHERE ${primaryKey} = ?`,
+        params: [...userParams, rowId],
+    };
+}
+let _tz;
+let _eq = ""; // embed query suffix: "&embed=true" or ""
+export function formatDateTime(value, style = "long", tz) {
+    if (value == null || value === "")
+        return "—";
+    const d = new Date(String(value));
+    if (isNaN(d.getTime()))
+        return String(value);
+    const t = tz ?? _tz;
+    if (style === "short") {
+        return d.toLocaleString("en-US", { month: "numeric", day: "numeric", year: "2-digit", hour: "numeric", minute: "2-digit", timeZone: t });
+    }
+    return d.toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", timeZone: t });
+}
+function formatCurrency(n, style) {
+    if (style === "short") {
+        const abs = Math.abs(n);
+        if (abs >= 1_000_000)
+            return (n < 0 ? "-" : "") + "$" + (abs / 1_000_000).toLocaleString("en-US", { maximumFractionDigits: 1 }) + "M";
+        if (abs >= 1_000)
+            return (n < 0 ? "-" : "") + "$" + (abs / 1_000).toLocaleString("en-US", { maximumFractionDigits: 1 }) + "K";
+        return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+    }
+    if (style === "whole")
+        return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+    return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+function formatValue(value, format, dateFormat) {
+    if (value == null || value === "")
+        return "—";
+    const s = String(value);
+    switch (format) {
+        case "date": {
+            const d = new Date(s);
+            return isNaN(d.getTime()) ? s : d.toLocaleDateString("en-US", { month: dateFormat === "short" ? "numeric" : "short", day: "numeric", year: dateFormat === "short" ? "2-digit" : "numeric", timeZone: _tz });
+        }
+        case "datetime":
+            return formatDateTime(value, dateFormat ?? "long");
+        case "currency":
+            return formatCurrency(Number(s), "full");
+        case "currency-whole":
+            return formatCurrency(Number(s), "whole");
+        case "currency-short":
+            return formatCurrency(Number(s), "short");
+        case "number":
+            return Number(s).toLocaleString("en-US");
+        case "percent":
+            return Number(s).toLocaleString("en-US", { maximumFractionDigits: 1 }) + "%";
+        default:
+            return s;
+    }
+}
+const BADGE_COLORS = {
+    pending: { bg: "#fef3c7", fg: "#92400e" },
+    waiting: { bg: "#fef3c7", fg: "#92400e" },
+    draft: { bg: "#fef3c7", fg: "#92400e" },
+    review: { bg: "#fef3c7", fg: "#92400e" },
+    approved: { bg: "#d1fae5", fg: "#065f46" },
+    active: { bg: "#d1fae5", fg: "#065f46" },
+    done: { bg: "#d1fae5", fg: "#065f46" },
+    success: { bg: "#d1fae5", fg: "#065f46" },
+    completed: { bg: "#d1fae5", fg: "#065f46" },
+    denied: { bg: "#fee2e2", fg: "#991b1b" },
+    rejected: { bg: "#fee2e2", fg: "#991b1b" },
+    failed: { bg: "#fee2e2", fg: "#991b1b" },
+    error: { bg: "#fee2e2", fg: "#991b1b" },
+    cancelled: { bg: "#f3f4f6", fg: "#4b5563" },
+    expired: { bg: "#f3f4f6", fg: "#4b5563" },
+    archived: { bg: "#f3f4f6", fg: "#4b5563" },
+};
+function badgeColorsFor(value, custom) {
+    if (custom) {
+        const hex = custom[value] ?? custom[value.toLowerCase()];
+        if (hex)
+            return { bg: hex + "22", fg: hex };
+    }
+    return BADGE_COLORS[value.toLowerCase()] ?? { bg: "#f3f4f6", fg: "#4b5563" };
+}
+function renderBadge(value, custom) {
+    const colors = badgeColorsFor(value, custom);
+    return `<span class="badge" style="background:${colors.bg};color:${colors.fg}">${esc(value)}</span>`;
+}
+function renderCell(value, col) {
+    if (col.badge && value != null && value !== "")
+        return renderBadge(String(value), col.badgeColors);
+    return esc(formatValue(value, col.format, col.dateFormat));
+}
+function renderDetailValue(value, field) {
+    if (field.badge && value != null && value !== "")
+        return renderBadge(String(value), field.badgeColors);
+    if (field.format === "multiline" && value != null) {
+        return `<div class="multiline">${esc(String(value)).replace(/\n/g, "<br>")}</div>`;
+    }
+    return esc(formatValue(value, field.format));
+}
+function interpolateTitle(template, row) {
+    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+        const val = row[key];
+        return val != null ? String(val) : "";
+    });
+}
+function evalShowWhen(condition, row) {
+    const v = row[condition.field];
+    switch (condition.op) {
+        case "eq": return v == condition.value;
+        case "neq": return v != condition.value;
+        case "in": return Array.isArray(condition.value) && condition.value.includes(String(v));
+        case "gt": return Number(v) > Number(condition.value);
+        case "lt": return Number(v) < Number(condition.value);
+        case "filled": return v !== "" && v !== undefined && v !== null;
+        case "empty": return v === "" || v === undefined || v === null;
+    }
+    return true;
+}
+// --- Section renderers (return HTML fragments, not full pages) ---
+function abbreviateNumber(n) {
+    const abs = Math.abs(n);
+    if (abs >= 1_000_000)
+        return (n < 0 ? "-" : "") + (abs / 1_000_000).toLocaleString("en-US", { maximumFractionDigits: 1 }) + "M";
+    if (abs >= 10_000)
+        return (n < 0 ? "-" : "") + (abs / 1_000).toLocaleString("en-US", { maximumFractionDigits: 1 }) + "K";
+    return n.toLocaleString("en-US");
+}
+function formatStatValue(value, format) {
+    if (value == null || value === "")
+        return "—";
+    const n = Number(value);
+    if (isNaN(n))
+        return esc(String(value));
+    switch (format) {
+        case "currency": return formatCurrency(n, "whole");
+        case "currency-whole": return formatCurrency(n, "whole");
+        case "currency-short": return formatCurrency(n, "short");
+        case "percent": return n.toLocaleString("en-US", { maximumFractionDigits: 1 }) + "%";
+        case "number":
+        default: return n.toLocaleString("en-US");
+    }
+}
+export function renderStatsSection(section, rows) {
+    const row = rows[0] ?? {};
+    let html = `<div class="section-stats">`;
+    for (const item of section.items) {
+        const borderStyle = item.color ? `border-top: 3px solid ${esc(item.color)}` : "";
+        const vc = item.valueColor;
+        const resolvedValueColor = vc === "neutral" ? "#1a1a1a" : vc === "match" ? item.color : vc;
+        const valStyle = (resolvedValueColor ?? (item.color ? item.color : "")) ? `color: ${esc(resolvedValueColor ?? item.color)}` : "";
+        const cardStyle = borderStyle;
+        const tag = item.href ? "a" : "div";
+        const hrefAttr = item.href ? ` href="${esc(item.href)}"` : "";
+        const rawNum = Number(row[item.column]);
+        const fmt = item.format;
+        const isCurrency = fmt === "currency" || fmt === "currency-whole" || fmt === "currency-short";
+        const shortVal = !isNaN(rawNum) ? (isCurrency ? formatCurrency(rawNum, "short") : abbreviateNumber(rawNum)) : "";
+        const dataShort = shortVal ? ` data-short="${esc(shortVal)}"` : "";
+        html += `<${tag} class="stat-card"${hrefAttr}${cardStyle ? ` style="${cardStyle}"` : ""}>
+      <div class="stat-label">${esc(item.label)}</div>
+      <div class="stat-value"${valStyle ? ` style="${valStyle}"` : ""}${dataShort}>${formatStatValue(row[item.column], item.format)}</div>
+    </${tag}>`;
+    }
+    html += `</div>`;
+    return html;
+}
+function resolveProgressColor(section, row, pct) {
+    if (section.colorColumn) {
+        const v = row[section.colorColumn];
+        if (v != null && String(v).trim())
+            return esc(String(v));
+    }
+    if (section.colorThresholds?.length) {
+        const sorted = [...section.colorThresholds].sort((a, b) => a.percent - b.percent);
+        for (const t of sorted) {
+            if (pct <= t.percent)
+                return esc(t.color);
+        }
+        return esc(sorted[sorted.length - 1].color);
+    }
+    return section.color ? esc(section.color) : "var(--accent)";
+}
+export function renderProgressSection(section, rows) {
+    let html = `<div class="section-progress">`;
+    for (const row of rows) {
+        const label = String(row[section.labelColumn] ?? "");
+        const value = Number(row[section.valueColumn] ?? 0);
+        const max = Number(row[section.maxColumn] ?? 1);
+        const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0;
+        const barColor = resolveProgressColor(section, row, pct);
+        let subtitle = "";
+        if (section.subtitleTemplate) {
+            subtitle = section.subtitleTemplate.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+                const v = row[key];
+                return v != null ? String(v) : "";
+            });
+        }
+        html += `<div class="progress-item">
+      <div class="progress-header">
+        <span class="progress-label">${esc(label)}</span>
+        <span class="progress-pct">${pct}%</span>
+      </div>
+      <div class="progress-track">
+        <div class="progress-fill" style="width:${pct}%;background:${barColor}"></div>
+      </div>
+      ${subtitle ? `<div class="progress-subtitle">${esc(subtitle)}</div>` : ""}
+    </div>`;
+    }
+    html += `</div>`;
+    return html;
+}
+function simpleMarkdown(text) {
+    return text
+        .split("\n\n").map(block => {
+        block = block.trim();
+        if (!block)
+            return "";
+        if (block.startsWith("### "))
+            return `<h4>${esc(block.slice(4))}</h4>`;
+        if (block.startsWith("## "))
+            return `<h3>${esc(block.slice(3))}</h3>`;
+        if (block.startsWith("# "))
+            return `<h2>${esc(block.slice(2))}</h2>`;
+        const lines = block.split("\n");
+        if (lines.every(l => l.startsWith("- "))) {
+            return `<ul>${lines.map(l => `<li>${inlineFormat(l.slice(2))}</li>`).join("")}</ul>`;
+        }
+        return `<p>${inlineFormat(lines.join("<br>"))}</p>`;
+    }).join("\n");
+}
+function inlineFormat(text) {
+    return esc(text)
+        .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+        .replace(/\*(.+?)\*/g, "<em>$1</em>");
+}
+export function renderTextSection(section) {
+    const content = section.content.trim().startsWith("<") ? section.content : simpleMarkdown(section.content);
+    return `<div class="section-text">${content}</div>`;
+}
+const CHART_PALETTE = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+export function renderChartSection(section, rows) {
+    const maxItems = section.chartType === "donut" ? 8 : 20;
+    const truncated = rows.length > maxItems;
+    const items = rows.slice(0, maxItems);
+    if (section.chartType === "donut")
+        return renderDonutChart(section, items, truncated ? rows.length - maxItems : 0);
+    return renderBarChart(section, items, truncated ? rows.length - maxItems : 0);
+}
+function renderBarChart(section, rows, othersCount) {
+    const lc = section.labelColumn ?? "label";
+    const vc = section.valueColumn ?? "value";
+    const values = rows.map(r => ({ label: String(r[lc] ?? ""), value: Number(r[vc] ?? 0) }));
+    values.sort((a, b) => b.value - a.value);
+    const maxVal = Math.max(...values.map(v => v.value), 1);
+    const barColor = section.color ?? "var(--accent)";
+    const barHeight = 28;
+    const labelWidth = 120;
+    const chartWidth = 600;
+    const svgHeight = values.length * (barHeight + 8) + 8;
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${chartWidth} ${svgHeight}" class="chart-bar-svg">`;
+    values.forEach((v, i) => {
+        const y = i * (barHeight + 8) + 4;
+        const barW = maxVal > 0 ? ((v.value / maxVal) * (chartWidth - labelWidth - 60)) : 0;
+        const color = section.colors?.[v.label] ?? (section.colorColumn ? CHART_PALETTE[i % CHART_PALETTE.length] : barColor);
+        svg += `<text x="${labelWidth - 8}" y="${y + barHeight / 2 + 5}" text-anchor="end" font-size="13" fill="#666">${esc(v.label.length > 14 ? v.label.slice(0, 13) + "…" : v.label)}</text>`;
+        svg += `<rect x="${labelWidth}" y="${y}" width="${barW}" height="${barHeight}" rx="4" fill="${esc(color)}"/>`;
+        svg += `<text x="${labelWidth + barW + 8}" y="${y + barHeight / 2 + 5}" font-size="13" fill="#666">${v.value.toLocaleString("en-US")}</text>`;
+    });
+    svg += `</svg>`;
+    let html = `<div class="section-chart">`;
+    if (section.title)
+        html += `<div class="chart-title">${esc(section.title)}</div>`;
+    html += svg;
+    if (othersCount > 0)
+        html += `<div class="chart-others">+${othersCount} others</div>`;
+    html += `</div>`;
+    return html;
+}
+function renderDonutChart(section, rows, othersCount) {
+    const lc = section.labelColumn ?? "label";
+    const vc = section.valueColumn ?? "value";
+    const items = rows.map((r, i) => {
+        const label = String(r[lc] ?? "");
+        return {
+            label,
+            value: Math.max(0, Number(r[vc] ?? 0)),
+            color: section.colors?.[label] ?? CHART_PALETTE[i % CHART_PALETTE.length],
+        };
+    });
+    const total = items.reduce((s, v) => s + v.value, 0) || 1;
+    const size = 160;
+    const cx = size / 2, cy = size / 2, r = 60;
+    const circumference = 2 * Math.PI * r;
+    let offset = 0;
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" class="chart-donut-svg">`;
+    for (const item of items) {
+        const pct = item.value / total;
+        const dash = pct * circumference;
+        svg += `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${esc(item.color)}" stroke-width="24" stroke-dasharray="${dash} ${circumference - dash}" stroke-dashoffset="${-offset}" transform="rotate(-90 ${cx} ${cy})"/>`;
+        offset += dash;
+    }
+    svg += `</svg>`;
+    let legend = `<div class="chart-legend">`;
+    for (const item of items) {
+        const pct = Math.round((item.value / total) * 100);
+        legend += `<div class="legend-item"><span class="legend-dot" style="background:${esc(item.color)}"></span>${esc(item.label)} — ${item.value.toLocaleString("en-US")} (${pct}%)</div>`;
+    }
+    if (othersCount > 0)
+        legend += `<div class="legend-item" style="color:#888">+${othersCount} others</div>`;
+    legend += `</div>`;
+    let html = `<div class="section-chart section-chart-donut">`;
+    if (section.title)
+        html += `<div class="chart-title">${esc(section.title)}</div>`;
+    html += `<div class="chart-donut-layout">${svg}${legend}</div>`;
+    html += `</div>`;
+    return html;
+}
+export function renderGallerySection(section, rows) {
+    const cols = section.columns ?? 3;
+    let html = `<div class="section-gallery" style="grid-template-columns: repeat(${cols}, 1fr)">`;
+    for (const row of rows) {
+        const imgUrl = row[section.imageColumn] ? String(row[section.imageColumn]) : "";
+        const title = section.titleColumn ? String(row[section.titleColumn] ?? "") : "";
+        html += `<div class="gallery-card">`;
+        if (imgUrl) {
+            html += `<div class="gallery-img"><img src="${esc(imgUrl)}" alt="${esc(title)}" loading="lazy"></div>`;
+        }
+        else {
+            html += `<div class="gallery-img gallery-placeholder"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></div>`;
+        }
+        if (title)
+            html += `<div class="gallery-title">${esc(title)}</div>`;
+        if (section.fields) {
+            for (const field of section.fields) {
+                html += `<div class="gallery-field"><span class="gallery-field-label">${esc(field.label)}</span> ${renderDetailValue(row[field.key], field)}</div>`;
+            }
+        }
+        html += `</div>`;
+    }
+    html += `</div>`;
+    return html;
+}
+export function renderAccordionSection(section, renderedChildren) {
+    return `<details class="section-accordion"${section.open ? " open" : ""}>
+    <summary class="accordion-summary">${esc(section.label)}</summary>
+    <div class="accordion-body">${renderedChildren}</div>
+  </details>`;
+}
+export function renderSection(section, queryResults, tableCounts, pages, sectionKey, sectionIndex, base, activeTabId) {
+    switch (section.type) {
+        case "stats": return renderStatsSection(section, queryResults.get(sectionKey) ?? []);
+        case "progress": return renderProgressSection(section, queryResults.get(sectionKey) ?? []);
+        case "text": return renderTextSection(section);
+        case "chart": return renderChartSection(section, queryResults.get(sectionKey) ?? []);
+        case "gallery": return renderGallerySection(section, queryResults.get(sectionKey) ?? []);
+        case "accordion": {
+            let childHtml = "";
+            section.sections.forEach((child, i) => {
+                childHtml += renderSection(child, queryResults, tableCounts, pages, `${sectionKey}:${i}`, sectionIndex, base, activeTabId);
+            });
+            return renderAccordionSection(section, childHtml);
+        }
+        case "table": {
+            const rows = queryResults.get(sectionKey) ?? [];
+            const count = tableCounts.get(sectionKey) ?? rows.length;
+            return renderTableSection(section, rows, count, pages, sectionIndex, base, activeTabId);
+        }
+    }
+}
+export function collectSectionQueries(sections, keyPrefix) {
+    const queries = [];
+    sections.forEach((section, i) => {
+        const key = `${keyPrefix}:${i}`;
+        if (section.type === "accordion") {
+            queries.push(...collectSectionQueries(section.sections, key));
+        }
+        else if ("query" in section && section.query) {
+            queries.push({ key, query: section.query });
+        }
+    });
+    return queries;
+}
+function renderTableSection(section, rows, totalCount, pages, sectionIndex, base, activeTabId) {
+    const pageSize = section.pageSize ?? 25;
+    const pageKey = `page_${sectionIndex}`;
+    const page = pages[pageKey] ?? 1;
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const pk = section.primaryKey ?? "id";
+    if (rows.length === 0) {
+        return `<div class="empty">${esc(section.emptyMessage ?? "No records found.")}</div>`;
+    }
+    let html = `<div class="table-wrap"><table>
+    <thead><tr>${section.columns.map(c => `<th>${esc(c.label)}</th>`).join("")}</tr></thead>
+    <tbody>`;
+    const hasDetail = !!section.detail;
+    for (const row of rows) {
+        if (hasDetail) {
+            const rowId = row[pk] != null ? String(row[pk]) : "";
+            html += `<tr class="clickable" data-row-id="${esc(rowId)}" onclick="location.href='${base}/row/${esc(rowId)}?tab=${esc(activeTabId)}&section=${sectionIndex}${_eq}'">`;
+        }
+        else {
+            html += `<tr>`;
+        }
+        for (const col of section.columns) {
+            html += `<td>${renderCell(row[col.key], col)}</td>`;
+        }
+        html += `</tr>`;
+    }
+    html += `</tbody></table></div>`;
+    if (totalPages > 1) {
+        const tabParam = `tab=${esc(activeTabId)}`;
+        html += `<div class="pagination">`;
+        if (page > 1)
+            html += `<a href="${base}?${tabParam}&${pageKey}=${page - 1}${_eq}" class="page-btn">&larr; Previous</a>`;
+        html += `<span class="page-info">Page ${page} of ${totalPages}</span>`;
+        if (page < totalPages)
+            html += `<a href="${base}?${tabParam}&${pageKey}=${page + 1}${_eq}" class="page-btn">Next &rarr;</a>`;
+        html += `</div>`;
+    }
+    return html;
+}
+export function renderPortal(config, queryResults, tableCounts, pages, activeTabId, session, basePath, breadcrumb, tabCounts, embed) {
+    _tz = config.timezone;
+    _eq = embed ? "&embed=true" : "";
+    const { title, description, access, branding, tabs } = config;
+    const needsAuth = access.mode !== "public" && !session;
+    const base = basePath ?? `/${config.surfaceId}`;
+    const logoSrc = branding?.logo ?? branding?.logoSquare;
+    const accentVar = branding?.accentColor ? `<style>:root { --accent: ${esc(branding.accentColor)}; }</style>` : "";
+    if (needsAuth) {
+        const authConfig = { workspace: config.workspace, surfaceId: config.surfaceId, title, access, pages: [], workflow: "", branding };
+        return renderForm(authConfig, null, null, base, undefined, undefined, embed);
+    }
+    const activeTab = tabs.find(t => t.id === activeTabId) ?? tabs[0];
+    if (!activeTab) {
+        return `<!DOCTYPE html><html><body><div style="max-width:600px;margin:40px auto;font-family:sans-serif"><h1>No tabs configured</h1></div></body></html>`;
+    }
+    const links = activeTab.links;
+    const ogImageUrl = branding?.ogImage ?? "/_og-image.png";
+    const metaTags = renderMetaTags({ title, description, ogImageUrl });
+    let html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>${esc(title)}</title>
+${metaTags}
+<style>${PORTAL_CSS}</style>
+${accentVar}
+</head>
+<body>
+<div class="container">
+  ${breadcrumb ? `<a href="${esc(breadcrumb.href)}" class="back-link">&larr; ${esc(breadcrumb.label)}</a>` : ""}
+  <header>
+    ${logoSrc ? (embed ? `<img src="${esc(logoSrc)}" alt="" class="brand-logo">` : `<a href="/"><img src="${esc(logoSrc)}" alt="" class="brand-logo"></a>`) : ""}
+    <h1>${esc(title)}</h1>
+    ${description ? `<p class="desc">${esc(description)}</p>` : ""}
+    ${session ? `<div class="header-meta">
+      <div class="session">${esc(session.email ?? session.phone ?? "")}</div>
+      ${!session.isDemo ? `<form method="POST" action="/logout"><button type="submit" class="logout-btn"><i data-lucide="log-out"></i> Log out</button></form>` : ""}
+    </div>` : ""}
+  </header>`;
+    if (config.sections && config.sections.length > 0) {
+        html += `<div class="portal-top-sections">`;
+        config.sections.forEach((section, i) => {
+            const sectionKey = `_top:${i}`;
+            html += renderSection(section, queryResults, tableCounts, pages, sectionKey, i, base, activeTab.id);
+        });
+        html += `</div>`;
+    }
+    if (tabs.length > 1) {
+        html += `<nav class="tab-bar">`;
+        for (const tab of tabs) {
+            const isActive = tab.id === activeTab.id;
+            const href = `${base}?tab=${esc(tab.id)}${_eq}`;
+            const tabStyle = tab.color ? ` style="--tab-color: ${esc(tab.color)}"` : "";
+            const count = tabCounts?.get(tab.id);
+            const countBadge = count != null ? ` <span class="tab-count">${count.toLocaleString("en-US")}</span>` : "";
+            html += `<a href="${href}" class="tab-link${isActive ? " tab-active" : ""}${tab.color ? " tab-colored" : ""}"${tabStyle}>${esc(tab.label)}${countBadge}</a>`;
+        }
+        html += `</nav>`;
+    }
+    if (links && links.length > 0) {
+        html += `<nav class="portal-links">${links.map(l => `<a href="${esc(l.href)}" class="link-btn">${esc(l.label)}</a>`).join("")}</nav>`;
+    }
+    html += `<div class="tab-content">`;
+    activeTab.sections.forEach((section, i) => {
+        const sectionKey = `${activeTab.id}:${i}`;
+        html += renderSection(section, queryResults, tableCounts, pages, sectionKey, i, base, activeTab.id);
+    });
+    html += `</div>
+</div>
+<div id="tl-toast-container"></div>
+<div id="tl-preview-container"></div>
+${config.autoplay ? `<script type="application/json" id="tl-autoplay">${JSON.stringify(config.autoplay)}</script>` : ""}
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+<script>lucide.createIcons();</script>
+<script>${STAT_ABBREV_JS}</script>
+<script>${TIMELINE_JS}</script>
+</body>
+</html>`;
+    return html;
+}
+export function findTableSection(config, tabId, sectionIndex) {
+    const tab = config.tabs.find(t => t.id === tabId);
+    if (!tab)
+        return null;
+    const section = tab.sections[sectionIndex];
+    if (!section || section.type !== "table")
+        return null;
+    return { tab, section };
+}
+export function renderPortalDetail(config, tableSection, row, session, tabId, basePath, embed) {
+    _tz = config.timezone;
+    _eq = embed ? "&embed=true" : "";
+    const { title, access, branding } = config;
+    const base = basePath ?? `/${config.surfaceId}`;
+    const needsAuth = access.mode !== "public" && !session;
+    const logoSrc = branding?.logo ?? branding?.logoSquare;
+    const accentVar = branding?.accentColor ? `<style>:root { --accent: ${esc(branding.accentColor)}; }</style>` : "";
+    if (needsAuth) {
+        const authConfig = { workspace: config.workspace, surfaceId: config.surfaceId, title, access, pages: [], workflow: "", branding };
+        return renderForm(authConfig, null, null, base, undefined, undefined, embed);
+    }
+    const detail = tableSection.detail;
+    const detailTitle = detail?.title ? interpolateTitle(detail.title, row) : esc(title);
+    const ogImageUrl = branding?.ogImage ?? "/_og-image.png";
+    const detailMetaTags = renderMetaTags({ title: `${detailTitle} — ${title}`, ogImageUrl });
+    let html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>${esc(detailTitle)} — ${esc(title)}</title>
+${detailMetaTags}
+<style>${PORTAL_CSS}</style>
+${accentVar}
+</head>
+<body>
+<div class="container">
+  ${`<a href="${esc(base)}?tab=${esc(tabId)}${_eq}" class="back-link">&larr; Back to ${esc(title)}</a>`}
+  <header>
+    ${logoSrc ? (embed ? `<img src="${esc(logoSrc)}" alt="" class="brand-logo">` : `<a href="/"><img src="${esc(logoSrc)}" alt="" class="brand-logo"></a>`) : ""}
+    <h1>${esc(detailTitle)}</h1>
+    ${session ? `<div class="header-meta">
+      <div class="session">${esc(session.email ?? session.phone ?? "")}</div>
+      ${!session.isDemo ? `<form method="POST" action="/logout"><button type="submit" class="logout-btn"><i data-lucide="log-out"></i> Log out</button></form>` : ""}
+    </div>` : ""}
+  </header>`;
+    if (detail?.fields) {
+        html += `<div class="detail-fields">`;
+        for (const field of detail.fields) {
+            html += `<div class="detail-field">
+        <div class="detail-label">${esc(field.label)}</div>
+        <div class="detail-value">${renderDetailValue(row[field.key], field)}</div>
+      </div>`;
+        }
+        html += `</div>`;
+    }
+    const actions = tableSection.actions ?? [];
+    const visibleActions = actions.filter(a => !a.showWhen || evalShowWhen(a.showWhen, row));
+    if (visibleActions.length > 0) {
+        const pk = tableSection.primaryKey ?? "id";
+        const rowId = row[pk] != null ? String(row[pk]) : "";
+        const rowDataJson = JSON.stringify(row);
+        html += `<div class="detail-actions" id="action-buttons">`;
+        for (const action of visibleActions) {
+            const s = action.style ?? "default";
+            const btnClass = `btn btn-${s === "primary" || s === "danger" || s === "success" || s === "warning" ? s : "default"}`;
+            const colorStyle = action.color ? ` style="--btn-bg: ${esc(action.color)}"` : "";
+            const confirmAttr = action.confirm ? ` data-confirm="${esc(action.confirm)}"` : "";
+            const afterAttr = action.afterActions ? ` data-after='${JSON.stringify(action.afterActions).replace(/'/g, "&#39;")}'` : "";
+            const afterMsgAttr = action.afterMessage ? ` data-after-msg="${esc(action.afterMessage)}"` : "";
+            const afterColorAttr = action.afterColor ? ` data-after-color="${esc(action.afterColor)}"` : "";
+            const timelineAttr = action.timeline ? ` data-timeline='${JSON.stringify(action.timeline).replace(/'/g, "&#39;")}'` : "";
+            const workflowAttr = action.workflow ? ` data-workflow="${esc(action.workflow)}"` : "";
+            html += `<button class="${btnClass}"${colorStyle} data-action="${esc(action.name)}"${workflowAttr}${timelineAttr}${confirmAttr}${afterAttr}${afterMsgAttr}${afterColorAttr}>${esc(action.label)}</button>`;
+        }
+        html += `</div>
+    <div id="action-msg" class="msg"></div>`;
+        const streamTargets = new Set();
+        for (const action of visibleActions) {
+            for (const ev of action.timeline ?? []) {
+                if (ev.event === "stream" && ev.target)
+                    streamTargets.add(ev.target.replace(/^#/, ""));
+            }
+        }
+        for (const id of streamTargets) {
+            html += `<div id="${esc(id)}" class="section-text" style="display:none; white-space:pre-wrap;"></div>`;
+        }
+        const sectionIdx = config.tabs.find(t => t.id === tabId)?.sections.indexOf(tableSection) ?? 0;
+        html += `<script>${ACTION_JS(base, "?tab=" + encodeURIComponent(tabId) + "&section=" + sectionIdx + (_eq ? "&embed=true" : ""), rowId, rowDataJson)}</script>`;
+    }
+    html += `</div>
+<div id="tl-toast-container"></div>
+<div id="tl-preview-container"></div>
+${config.autoplay ? `<script type="application/json" id="tl-autoplay">${JSON.stringify(config.autoplay)}</script>` : ""}
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+<script>lucide.createIcons();</script>
+<script>${TIMELINE_JS}</script>
+</body>
+</html>`;
+    return html;
+}
+function ACTION_JS(base, query, rowId, rowDataJson) {
+    return `
+(function() {
+  var actionsDiv = document.getElementById('action-buttons');
+  var msg = document.getElementById('action-msg');
+  var rowData = ${rowDataJson};
+  var savedHtml = actionsDiv.innerHTML;
+
+  function bindButtons() {
+    var buttons = actionsDiv.querySelectorAll('[data-action]');
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', handleClick);
+    }
+  }
+
+  function handleClick(e) {
+    var btn = e.currentTarget;
+    var confirmText = btn.getAttribute('data-confirm');
+    if (confirmText && !confirm(confirmText)) return;
+
+    var timelineRaw = btn.getAttribute('data-timeline');
+    if (timelineRaw) {
+      var events = JSON.parse(timelineRaw);
+      if (window.__mugTimeline) window.__mugTimeline.play(events, btn);
+      return;
+    }
+
+    var actionName = btn.getAttribute('data-action');
+    var workflow = btn.getAttribute('data-workflow');
+    var afterRaw = btn.getAttribute('data-after');
+    var afterActions = afterRaw ? JSON.parse(afterRaw) : null;
+    var afterMsg = btn.getAttribute('data-after-msg');
+    var afterColor = btn.getAttribute('data-after-color');
+    var label = btn.textContent || 'Done';
+    var now = new Date();
+    var tzOpt = ${_tz ? "'" + _tz + "'" : "undefined"};
+    var ts = now.toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: tzOpt }) + ' ' + now.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit', timeZone: tzOpt });
+    var statusText = afterMsg ? afterMsg.replace('{{timestamp}}', ts) : '\\u2713 ' + label + ' \\u00b7 ' + ts;
+
+    var statusStyle = afterColor ? ' style="color:' + afterColor + '"' : '';
+    var statusHtml = '<span class="action-status"' + statusStyle + '>' + statusText + '</span>';
+    if (afterActions) {
+      for (var k = 0; k < afterActions.length; k++) {
+        var aa = afterActions[k];
+        var s = aa.style || 'default';
+        var cls = 'btn btn-' + (s === 'primary' || s === 'danger' || s === 'success' || s === 'warning' ? s : 'default') + ' btn-sm';
+        statusHtml += '<button class="' + cls + '" data-action="' + aa.action + '" data-workflow="' + workflow + '">' + aa.label + '</button>';
+      }
+    }
+    actionsDiv.innerHTML = statusHtml;
+    msg.textContent = '';
+    msg.className = 'msg';
+    bindButtons();
+
+    fetch('${base}/action${query}', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: actionName,
+        workflow: workflow,
+        rowId: '${rowId}',
+        rowData: rowData
+      })
+    }).then(function(r) { return r.json(); }).then(function(d) {
+      if (d.status !== 'ok') {
+        actionsDiv.innerHTML = savedHtml;
+        bindButtons();
+        msg.className = 'msg';
+        msg.textContent = d.error || 'Action failed.';
+      }
+    }).catch(function() {
+      actionsDiv.innerHTML = savedHtml;
+      bindButtons();
+      msg.className = 'msg';
+      msg.textContent = 'Network error. Try again.';
+    });
+  }
+
+  bindButtons();
+})();`;
+}
+const STAT_ABBREV_JS = `
+(function() {
+  var els = document.querySelectorAll('.stat-value[data-short]');
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    if (el.scrollWidth > el.parentElement.clientWidth - 32) {
+      el.textContent = el.getAttribute('data-short');
+    }
+  }
+})();
+`;
+const TIMELINE_JS = `
+(function() {
+  var toastContainer = document.getElementById('tl-toast-container');
+  var previewContainer = document.getElementById('tl-preview-container');
+
+  function showToast(msg) {
+    var el = document.createElement('div');
+    el.className = 'tl-toast';
+    el.textContent = msg;
+    toastContainer.appendChild(el);
+  }
+
+  function showPreview(ev) {
+    previewContainer.innerHTML = '';
+    var card = document.createElement('div');
+    card.className = 'tl-preview';
+    var ch = ev.channel || 'email';
+    card.innerHTML =
+      '<div class="tl-preview-channel">' + ch.toUpperCase() + '</div>' +
+      (ev.to ? '<div class="tl-preview-to">To: ' + esc(ev.to) + '</div>' : '') +
+      (ev.subject ? '<div class="tl-preview-subject">' + esc(ev.subject) + '</div>' : '') +
+      '<div class="tl-preview-body">' + esc(ev.body || '') + '</div>';
+    previewContainer.appendChild(card);
+  }
+
+  function streamText(ev) {
+    var target = ev.target ? document.querySelector(ev.target) : null;
+    if (!target) return;
+    target.style.display = '';
+    var text = ev.text || '';
+    var i = 0;
+    target.innerHTML = '';
+    var cursor = document.createElement('span');
+    cursor.className = 'tl-stream-cursor';
+    target.appendChild(cursor);
+    var interval = setInterval(function() {
+      if (i >= text.length) {
+        clearInterval(interval);
+        cursor.remove();
+        return;
+      }
+      cursor.before(document.createTextNode(text[i]));
+      i++;
+    }, 30);
+  }
+
+  function updateField(ev) {
+    var row = ev.row ? document.querySelector('[data-row-id="' + ev.row + '"]') : null;
+    if (!row) return;
+    var cells = row.querySelectorAll('td');
+    var headers = row.closest('table') ? row.closest('table').querySelectorAll('th') : [];
+    for (var j = 0; j < headers.length; j++) {
+      if (headers[j].textContent.trim().toLowerCase() === (ev.field || '').toLowerCase()) {
+        if (cells[j]) {
+          cells[j].textContent = ev.value || '';
+          cells[j].classList.add('tl-update-flash');
+        }
+        break;
+      }
+    }
+  }
+
+  function makeBadge(message, className, bg, fg) {
+    var badge = document.createElement('span');
+    badge.className = className;
+    if (bg) { badge.style.background = bg; badge.style.color = fg || '#fff'; }
+    badge.innerHTML = '<i data-lucide="pointer" style="width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-right:4px"></i>' + esc(message);
+    return badge;
+  }
+
+  function highlightRow(ev) {
+    if (ev.action) {
+      var btn = document.querySelector('[data-action="' + ev.action + '"]');
+      if (!btn) return;
+      var bg = getComputedStyle(btn).backgroundColor;
+      btn.style.setProperty('--hl-color', bg);
+      btn.classList.add('tl-highlight-btn');
+      if (ev.message) {
+        btn.parentNode.insertBefore(makeBadge(ev.message, 'tl-highlight-btn-badge', bg, '#fff'), btn.nextSibling);
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+      }
+      return;
+    }
+    var row = ev.row ? document.querySelector('[data-row-id="' + ev.row + '"]') : null;
+    if (!row) return;
+    row.classList.add('tl-highlight');
+    if (ev.message) {
+      var lastCell = row.querySelector('td:last-child');
+      if (lastCell) {
+        lastCell.appendChild(makeBadge(ev.message, 'tl-highlight-badge', null, null));
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+      }
+    }
+  }
+
+  function esc(s) {
+    var d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function playEvents(events, triggerBtn) {
+    if (triggerBtn) triggerBtn.disabled = true;
+    var maxDelay = 0;
+    for (var i = 0; i < events.length; i++) {
+      if (events[i].delay > maxDelay) maxDelay = events[i].delay;
+    }
+    for (var i = 0; i < events.length; i++) {
+      (function(ev) {
+        setTimeout(function() {
+          if (ev.event === 'toast') showToast(ev.message || '');
+          else if (ev.event === 'preview') showPreview(ev);
+          else if (ev.event === 'stream') streamText(ev);
+          else if (ev.event === 'update') updateField(ev);
+          else if (ev.event === 'highlight') highlightRow(ev);
+        }, ev.delay * 1000);
+      })(events[i]);
+    }
+    if (triggerBtn) {
+      setTimeout(function() { triggerBtn.disabled = false; }, (maxDelay + 2) * 1000);
+    }
+  }
+
+  window.__mugTimeline = { play: playEvents };
+
+  var autoplayEl = document.getElementById('tl-autoplay');
+  if (autoplayEl) {
+    try {
+      var events = JSON.parse(autoplayEl.textContent);
+      if (events && events.length) playEvents(events, null);
+    } catch(e) {}
+  }
+})();
+`;
+export function renderDevBanner(currentIdentity, registeredUsers, accentColor, workspaceName, badge) {
+    const inputStyle = "flex:1;max-width:300px;padding:3px 8px;border:1px solid #1E2430;border-radius:4px;font-size:13px;background:#13161A;color:#E9E9EA";
+    let identityControl;
+    if (registeredUsers && registeredUsers.length > 0) {
+        const options = registeredUsers.map(u => `<option value="${esc(u)}"${u === currentIdentity ? " selected" : ""}>${esc(u)}</option>`).join("");
+        identityControl = `<select id="mug-dev-identity" style="${inputStyle}"><option value="">— select user —</option>${options}</select>`;
+    }
+    else {
+        identityControl = `<input type="email" id="mug-dev-identity" value="${esc(currentIdentity)}" placeholder="user@example.com" style="${inputStyle}">`;
+    }
+    const isDropdown = registeredUsers && registeredUsers.length > 0;
+    const applyBtn = isDropdown ? "" : `<button id="mug-dev-apply" style="padding:3px 12px;border:1px solid #1E2430;border-radius:4px;background:#13161A;color:#A3A6A7;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;transition:all 0.15s">Apply</button>`;
+    const iconColor = accentColor || "#71B7FB";
+    const displayName = workspaceName ? esc(workspaceName.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")) : "";
+    const badgeText = badge || "Surface Preview";
+    return `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" media="print" onload="this.media='all'">
+<div id="mug-dev-banner" style="position:sticky;top:0;z-index:9999;background:#08090C;color:#E9E9EA;height:56px;padding:0 24px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;border-bottom:1px solid #1E2430"><div style="max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;height:100%">
+  <a href="/explorer" style="display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit"><svg width="28" height="36" viewBox="0 0 291 371" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0"><path d="M134.129 122.279L140.915 122.8L141.155 124.478L141.394 126.157L151.534 126.674L161.674 127.191L167.245 128.392L172.817 129.593L176.743 130.899L180.668 132.206L179.403 132.915L178.139 133.624L170.306 134.807L162.472 135.99L156.284 135.995L150.097 136V138.406V140.813L103.591 140.606L57.0848 140.4L56.8325 138.2L56.5794 136L51.2438 135.984L45.9073 135.968L40.3186 135.187L34.7299 134.406L30.9376 133.523L27.1452 132.641V131.987V131.334L34.1311 129.714L41.117 128.094L47.362 127.247L53.6078 126.4H59.5374H65.4678V124.438V122.476L70.4577 122.192L75.4477 121.908L101.395 121.834L127.343 121.759L134.129 122.279Z" fill="${iconColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.07464 136.078L5.58875 136.957V137.573V138.189L10.5787 139.553L15.5686 140.917L19.6268 142.398L23.6858 143.878L29.8645 144.739L36.0433 145.6H43.9161H51.7891L52.0422 147.8L52.2944 150H103.391H154.488L154.729 147.918L154.97 145.836L167.503 145.398L180.036 144.96L184.827 143.222L189.617 141.485L195.206 139.871L200.795 138.258L201.623 137.208L202.452 136.158L204.418 135.879L206.383 135.6L206.407 231.8L206.431 328H204.315H202.198L201.636 335.2L201.074 342.4H199.138H197.202V344.8V347.2H194.807H192.411V349.6V352H190.016H187.621V354.4V356.8H182.831H178.04V359.2V361.6H173.25H168.46L168.461 363.8L168.461 366H157.084H145.706L145.454 368.2L145.2 370.4H103.391H61.5821L61.329 368.2L61.0767 366L49.3005 365.778L37.5243 365.558V363.578V361.6H33.1331H28.742V359.2V356.8H23.9517H19.1613V354.453V352.106L16.9658 351.853L14.7702 351.6L14.5179 349.4L14.2648 347.2H11.9232H9.58069V342.4V337.6H7.18553H4.79036V332.8V328H2.3952H3.8147e-05V231.6V135.2H0.280282H0.560526L3.07464 136.078ZM19.1613 323.094V243.547V164H23.9517H28.742V239.2V314.4H31.1372H33.5323V321.6V328.8H35.5283H37.5243V330.8V332.8H39.9194H42.3146V335.2V337.6H44.7097H47.1049V342.4V347.2H42.7665H38.4288L38.1757 345L37.9235 342.8L33.4948 342.565L29.0654 342.33L28.1751 339.965L27.2841 337.6H25.649H24.0139L23.7832 330.6L23.5525 323.6L21.3569 323.347L19.1613 323.094Z" fill="${iconColor}"/><path d="M237.972 155.228L239.516 156.056V157.586V159.116L243.708 159.358L247.899 159.6L248.687 161.4L249.475 163.2H251.182H252.889L255.384 163.7L257.879 164.2V166.5V168.8H260.189H262.499L262.961 170.007L263.423 171.214L265.442 172.135L267.46 173.057V175.275V177.494L269.655 177.747L271.851 178L272.101 180.6L272.352 183.2H274.585H276.819L276.438 185.2L276.056 187.2H278.544H281.033V192V196.8H283.428H285.823V204V211.2H288.218H290.613V230V248.8H288.218H285.823V255.547V262.294L283.627 262.547L281.432 262.8L281.192 267.4L280.953 272H278.977H277.001L276.522 274.4L276.043 276.8H274.146H272.25V278.508V280.217L270.454 282.033L268.658 283.85L267.628 285.125L266.598 286.4H264.634H262.67V288.8V291.2H260.274H257.879V293.2V295.2H255.484H253.089V297.6V300H246.303H239.516V302.4V304.8H227.541H215.565V295.622V286.442L227.341 286.222L239.117 286L239.086 283.8L239.054 281.6H243.677H248.299V279.2V276.8H250.694H253.089V274.4V272H255.484H257.879V269.6V267.2H260.274H262.67V264.8V262.4H265.065H267.46V257.492V252.583L269.456 250.73L271.452 248.876V230.038V211.2H269.487H267.522L267.291 204.2L267.061 197.2L264.865 196.947L262.67 196.694V194.347V192H260.274H257.879V190.063V188.127L255.484 187.6L253.089 187.073V185.19V183.306L250.893 183.053L248.698 182.8L248.445 180.6L248.192 178.4H243.907H239.623L239.369 176.2L239.117 174L227.341 173.778L215.565 173.558V163.978V154.4H225.996H236.427L237.972 155.228Z" fill="${iconColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M107.782 6.8V13.6H110.073H112.364L112.858 16.6L113.354 19.6V23.2V26.8L112.866 29.756L112.378 32.7128L110.28 32.956L108.182 33.2L107.929 35.4L107.676 37.6H105.786H103.897L103.644 39.8L103.391 42L101.196 42.2528L99.0001 42.5064V44.0792V45.6512L97.8433 48.4256L96.6864 51.2H95.5527H94.419L93.924 54.2L93.4289 57.2L93.4904 64.4L93.5511 71.6L94.0805 75.6L94.609 79.6L96.8045 79.8528L99.0001 80.1064V82.0528V84H103.391H107.782V79.6V75.2H105.88H103.976L103.495 73.4L103.014 71.6L103.003 65.852L102.992 60.104L103.77 58.052L104.549 56H106.113H107.676L107.929 53.8L108.182 51.6L110.328 51.3512L112.476 51.1032L112.724 48.9512L112.972 46.8L115.167 46.5472L117.363 46.2936V44.4V42.5064L119.559 42.2528L121.754 42L121.992 37.4496L122.23 32.8992L124.387 32.6496L126.544 32.4L126.303 26L126.062 19.6L123.583 12.2392L121.105 4.87841L119.433 4.6392L117.762 4.4L117.51 2.2L117.257 0H112.52H107.782V6.8ZM66.2662 37.548V47.096L65.4878 49.148L64.7093 51.2H63.0926H61.4759V53.6V56H59.0807H56.6856V58.4V60.8H54.2904H51.8952V69.9472V79.0936L54.0908 79.3472L56.2864 79.6L56.5386 81.8L56.7917 84H61.1294H65.4678V79.6V75.2H63.4719H61.4759V70.4V65.6H63.4088H65.3409L65.867 63.2L66.3932 60.8H68.2726H70.152L70.4051 58.6L70.6573 56.4L72.8042 56.1512L74.9519 55.9032L75.1994 53.7512L75.4477 51.6L77.6432 51.3472L79.8388 51.0936V41.9472V32.8H77.4436H75.0485V30.4V28H70.6573H66.2662V37.548ZM146.096 36.6L146.087 45.2L145.592 48.2L145.097 51.2H143.206H141.315V53.6V56H138.919H136.524V58.4V60.8H134.129H131.734V69.9368V79.0728L134.129 79.6L136.524 80.1272V82.0632V84H140.915H145.307V79.6V75.2H143.359H141.413L140.876 71.6096L140.338 68.02L140.801 66.8096L141.264 65.6H143.286H145.307V63.2V60.8H147.649H149.991L150.244 58.6L150.496 56.4L152.692 56.1472L154.887 55.8936V53.5472V51.2H156.883H158.879V42V32.8H156.883H154.887V30.4V28H150.496H146.105L146.096 36.6Z" fill="${iconColor}"/><path d="M145.307 105.2V107.2L147.901 107.222L150.496 107.243L161.274 107.678L172.053 108.113L173.051 108.431L174.049 108.75V110.261V111.772L178.719 112.262L183.39 112.75L189.697 114.747L196.004 116.744L199.797 119.154L203.589 121.565V123.164V124.763L201.78 125.951L199.97 127.139L196.544 128.35L193.118 129.562L190.538 126.981L187.958 124.4L182.8 122.609L177.641 120.818L167.262 118.471L156.883 116.125L149.698 115.261L142.512 114.396L132.217 113.598L121.922 112.8H104.641H87.362L73.0214 113.988L58.6815 115.176L53.0928 116.069L47.5041 116.962L35.7965 119.63L24.0882 122.298L21.0264 123.871L17.9638 125.444L16.0987 127.446L14.2345 129.449L12.0844 128.831L9.93437 128.214L6.51408 126.465L3.09379 124.716L3.3429 122.962L3.59278 121.209L7.73164 118.734L11.8705 116.26L17.2644 114.486L22.6575 112.711L27.637 112.246L32.6158 111.78L33.0892 109.89L33.5627 108H40.2108H46.8598L54.1675 107.48L61.4759 106.961V105.08V103.2H103.391H145.307V105.2Z" fill="${iconColor}"/></svg>
+  ${displayName ? `<strong style="white-space:nowrap;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;letter-spacing:-0.5px">${displayName}</strong>` : ""}</a>
+  <span style="font-size:11px;padding:2px 8px;border-radius:4px;background:#13161A;border:1px solid #1E2430;color:#A3A6A7;font-weight:500;white-space:nowrap">${esc(badgeText)}</span>
+  <span style="flex:1"></span>
+  <span style="white-space:nowrap;color:#A3A6A7">View as:</span>
+  ${identityControl}
+  ${applyBtn}
+</div></div>
+<script>
+(function() {
+  var el = document.getElementById('mug-dev-identity');
+  function apply() {
+    var val = (el.value || '').trim();
+    document.cookie = 'mug_dev_identity=' + encodeURIComponent(val) + ';path=/;max-age=31536000';
+    location.reload();
+  }
+  if (el.tagName === 'INPUT') {
+    var btn = document.getElementById('mug-dev-apply');
+    var orig = el.value;
+    function updateBtn() {
+      var dirty = el.value.trim() !== orig.trim();
+      btn.style.background = dirty ? '#71B7FB' : '#13161A';
+      btn.style.color = dirty ? '#08090C' : '#A3A6A7';
+      btn.style.borderColor = dirty ? '#71B7FB' : '#1E2430';
+    }
+    el.addEventListener('input', updateBtn);
+    btn.addEventListener('click', apply);
+    el.addEventListener('keydown', function(e) { if (e.key === 'Enter') apply(); });
+  } else {
+    el.addEventListener('change', apply);
+  }
+})();
+</script>`;
+}
+const PORTAL_CSS = `
+:root { --accent: #1a1a1a; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #1a1a1a; line-height: 1.5; }
+.container { max-width: 800px; margin: 0 auto; padding: 24px 16px; }
+header { margin-bottom: 24px; position: relative; }
+.brand-logo { display: block; max-height: 72px; max-width: 240px; margin-bottom: 12px; }
+h1 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
+.desc { color: #666; font-size: 14px; margin-bottom: 12px; }
+.header-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.session { font-size: 13px; color: #666; background: #f0f0f0; padding: 6px 12px; border-radius: 6px; display: inline-block; }
+.logout-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: #f0f0f0; border-radius: 6px; cursor: pointer; color: #666; font-size: 13px; font-family: inherit; transition: background 0.15s, color 0.15s; }
+.logout-btn:hover { background: #e0e0e0; color: #333; }
+.logout-btn svg { width: 16px; height: 16px; }
+
+.tab-bar { display: flex; gap: 0; border-bottom: 2px solid #e0e0e0; margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
+.tab-link { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #666; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
+.tab-link:hover { color: var(--accent); }
+.tab-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
+.tab-colored { color: var(--tab-color); }
+.tab-colored:hover { color: var(--tab-color); }
+.tab-colored.tab-active { color: var(--tab-color); border-bottom-color: var(--tab-color); }
+.tab-count { font-size: 12px; font-weight: 600; background: #e8e8e8; color: #666; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
+.tab-active .tab-count { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
+.tab-colored .tab-count { background: color-mix(in srgb, var(--tab-color) 15%, transparent); color: var(--tab-color); }
+.tab-content { }
+
+.portal-links { display: flex; gap: 8px; margin-top: 0; margin-bottom: 20px; flex-wrap: wrap; }
+.link-btn { display: inline-block; padding: 8px 16px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background 0.15s; }
+.link-btn:hover { background: color-mix(in srgb, var(--accent) 80%, #000); }
+
+.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid #e0e0e0; background: #fff; }
+table { width: 100%; border-collapse: collapse; font-size: 14px; }
+th { padding: 10px 14px; text-align: left; background: #fafafa; color: #666; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e0e0e0; }
+td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
+tr.clickable { cursor: pointer; transition: background 0.1s; }
+tr.clickable:hover { background: #f8f8f8; }
+tr:last-child td { border-bottom: none; }
+
+.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
+
+.empty { text-align: center; padding: 48px 24px; color: #999; font-size: 15px; background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; }
+
+.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
+.page-btn { padding: 8px 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: var(--accent); font-size: 14px; transition: background 0.15s; }
+.page-btn:hover { background: #f0f0f0; }
+.page-info { font-size: 14px; color: #666; }
+
+.back-link { display: inline-block; margin-bottom: 16px; color: #666; text-decoration: none; font-size: 14px; transition: color 0.15s; }
+.back-link:hover { color: var(--accent); }
+
+.detail-fields { background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; overflow: hidden; }
+.detail-field { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
+.detail-field:last-child { border-bottom: none; }
+.detail-label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+.detail-value { font-size: 15px; }
+.multiline { white-space: pre-wrap; }
+
+.detail-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
+.btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, #000); }
+.btn-danger { background: #dc2626; color: #fff; }
+.btn-danger:hover { background: #b91c1c; }
+.btn-success { background: #16a34a; color: #fff; }
+.btn-success:hover { background: #15803d; }
+.btn-warning { background: #d97706; color: #fff; }
+.btn-warning:hover { background: #b45309; }
+.btn-default { background: #e8e8e8; color: #333; }
+.btn-default:hover { background: #ddd; }
+.btn[style*="--btn-bg"] { background: var(--btn-bg); color: #fff; }
+.btn[style*="--btn-bg"]:hover { background: color-mix(in srgb, var(--btn-bg) 80%, #000); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.msg { font-size: 14px; color: #666; margin-top: 12px; }
+.msg.success { color: var(--accent); font-weight: 500; }
+.action-status { color: var(--accent); font-weight: 500; font-size: 14px; }
+.btn-sm { font-size: 13px; padding: 6px 14px; }
+.detail-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+
+.section-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
+.stat-card { flex: 1; min-width: 120px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; }
+a.stat-card { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
+a.stat-card:hover { border-color: #bbb; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+.stat-label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+.stat-value { font-size: 28px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.section-progress { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; }
+.progress-item { }
+.progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
+.progress-label { font-size: 14px; font-weight: 500; }
+.progress-pct { font-size: 13px; color: #666; font-weight: 600; }
+.progress-track { height: 8px; background: #e8e8e8; border-radius: 4px; overflow: hidden; }
+.progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
+.progress-subtitle { font-size: 12px; color: #888; margin-top: 4px; }
+
+.section-text { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; }
+.section-text h2 { font-size: 20px; margin-bottom: 8px; }
+.section-text h3 { font-size: 17px; margin-bottom: 6px; }
+.section-text h4 { font-size: 15px; margin-bottom: 4px; }
+.section-text p { margin-bottom: 12px; }
+.section-text p:last-child { margin-bottom: 0; }
+.section-text ul { margin: 0 0 12px 20px; }
+.section-text li { margin-bottom: 4px; }
+
+.section-chart { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+.chart-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+.chart-bar-svg { width: 100%; height: auto; }
+.chart-donut-layout { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
+.chart-donut-svg { width: 160px; height: 160px; flex-shrink: 0; }
+.chart-legend { display: flex; flex-direction: column; gap: 6px; }
+.legend-item { font-size: 13px; display: flex; align-items: center; gap: 8px; }
+.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.chart-others { font-size: 12px; color: #888; margin-top: 8px; }
+
+.section-gallery { display: grid; gap: 16px; margin-bottom: 20px; }
+.gallery-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }
+.gallery-img { aspect-ratio: 4/3; overflow: hidden; background: #f5f5f5; }
+.gallery-img img { width: 100%; height: 100%; object-fit: cover; }
+.gallery-placeholder { display: flex; align-items: center; justify-content: center; }
+.gallery-title { font-size: 15px; font-weight: 600; padding: 12px 14px 4px; }
+.gallery-field { font-size: 13px; padding: 2px 14px; color: #666; }
+.gallery-field:last-child { padding-bottom: 12px; }
+.gallery-field-label { font-weight: 600; color: #999; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
+
+.section-accordion { margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }
+.accordion-summary { padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: pointer; background: #fafafa; list-style: none; display: flex; align-items: center; gap: 8px; }
+.accordion-summary::-webkit-details-marker { display: none; }
+.accordion-summary::before { content: ''; display: inline-block; width: 8px; height: 8px; border-right: 2px solid #666; border-bottom: 2px solid #666; transform: rotate(-45deg); transition: transform 0.2s; flex-shrink: 0; }
+details[open] > .accordion-summary::before { transform: rotate(45deg); }
+.accordion-body { padding: 16px; }
+.accordion-body > :last-child { margin-bottom: 0; }
+
+#tl-toast-container { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 380px; max-height: calc(100vh - 32px); overflow-y: auto; pointer-events: none; }
+.tl-toast { background: #1a1a1a; color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,0.2); animation: tl-slide-in 0.3s ease-out; pointer-events: auto; }
+.tl-toast.tl-out { animation: tl-slide-out 0.3s ease-in forwards; }
+@keyframes tl-slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
+@keyframes tl-slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
+
+#tl-preview-container { position: fixed; bottom: 16px; right: 16px; z-index: 999; max-width: 400px; pointer-events: none; }
+.tl-preview { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); animation: tl-preview-in 0.4s ease-out; pointer-events: auto; }
+.tl-preview.tl-out { animation: tl-preview-out 0.3s ease-in forwards; }
+@keyframes tl-preview-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
+@keyframes tl-preview-out { from { opacity: 1; } to { opacity: 0; } }
+.tl-preview-channel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 4px; }
+.tl-preview-to { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
+.tl-preview-subject { font-size: 13px; color: #666; margin-bottom: 8px; }
+.tl-preview-body { font-size: 14px; color: #1a1a1a; line-height: 1.5; white-space: pre-wrap; }
+
+.tl-stream-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--accent, #1a1a1a); vertical-align: text-bottom; animation: tl-blink 0.6s step-end infinite; }
+@keyframes tl-blink { 50% { opacity: 0; } }
+
+.tl-update-flash { animation: tl-flash 0.6s ease-out; }
+@keyframes tl-flash { 0% { background: #fef3c7; } 100% { background: transparent; } }
+
+tr.tl-highlight { background: rgba(234, 179, 8, 0.06); animation: tl-row-pulse 2s ease-in-out infinite; }
+tr.tl-highlight td { background: rgba(234, 179, 8, 0.06); }
+@keyframes tl-row-pulse { 0%, 100% { outline: 1.5px solid rgba(234, 179, 8, 0.4); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); } 50% { outline: 1.5px solid rgba(234, 179, 8, 0.9); box-shadow: 0 0 4px 3px rgba(234, 179, 8, 0.15); } }
+.tl-highlight-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #fef3c7; color: #92400e; white-space: nowrap; vertical-align: middle; animation: tl-badge-in 0.3s ease-out; }
+@keyframes tl-badge-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
+
+.tl-highlight-btn { animation: tl-btn-pulse 2s ease-in-out infinite; }
+@keyframes tl-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--hl-color, rgba(0,0,0,0.2)); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--hl-color, rgba(0,0,0,0.2)) 35%, transparent); } }
+.tl-highlight-btn-badge { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; animation: tl-badge-in 0.3s ease-out; }
+
+@media (max-width: 480px) {
+  .container { padding: 16px 12px; }
+  h1 { font-size: 20px; }
+  th, td { padding: 8px 10px; font-size: 13px; }
+  .btn { padding: 14px 20px; }
+  .stat-value { font-size: 22px; }
+  .section-stats { gap: 8px; }
+  .stat-card { min-width: 100px; padding: 12px; }
+  .chart-donut-layout { flex-direction: column; align-items: flex-start; }
+  .section-gallery { grid-template-columns: 1fr !important; }
+  #tl-toast-container { top: auto; bottom: 16px; right: 8px; left: 8px; max-width: none; }
+  .tl-toast { border-radius: 8px; }
+  #tl-preview-container { right: 8px; left: 8px; bottom: 8px; max-width: none; }
+}
+`;