import { decodeHTML } from "entities";
export interface DesignExportFile {
filename: string;
fileType: string | null;
content: string | null;
}
export interface DesignExportSaveResult {
filePath?: string;
saveWarning?: string;
}
function escapeHtml(str: string): string {
return str
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """);
}
// Layers toggled hidden in the editor are only visually suppressed by the
// live editor bridge (which paints `display:none` on
// `[data-agent-native-hidden="true"]` inside the canvas iframe). Exports never
// go through that bridge, so without this rule hidden layers would leak back
// into every exported artifact. Inject the same rule at export time so
// hidden-in-editor stays hidden-in-export.
export const HIDDEN_LAYER_EXPORT_STYLE_MARKER =
"data-agent-native-export-hidden";
export const HIDDEN_LAYER_EXPORT_CSS = `[data-agent-native-hidden="true"]{display:none!important}`;
/**
* Wraps the hidden-layer suppression rule in a marked `;
}
/**
* Injects the hidden-layer suppression rule into a standalone HTML document,
* before `` when present, otherwise prepended to the document. Safe to
* call more than once — re-injection is skipped if the marked style tag is
* already present.
*/
export function injectHiddenLayerExportStyle(html: string): string {
if (
new RegExp(`]*${HIDDEN_LAYER_EXPORT_STYLE_MARKER}\\b`, "i").test(
html,
)
) {
return html;
}
const styleTag = hiddenLayerExportStyleTag();
const closeHead = html.lastIndexOf("");
if (closeHead !== -1) {
return `${html.slice(0, closeHead)}${styleTag}\n${html.slice(closeHead)}`;
}
return `${styleTag}\n${html}`;
}
function extractRenderableHtml(content: string): string {
const bodyMatch = content.match(/]*>([\s\S]*?)<\/body>/i);
if (bodyMatch) return bodyMatch[1].trim();
return content;
}
export function safeExportBaseName(title: string | null | undefined): string {
const safe = (title || "design")
.replace(/[^a-zA-Z0-9_-]/g, "-")
.replace(/-+/g, "-")
.replace(/^-|-$/g, "");
return safe || "design";
}
export function exportFilename(
title: string | null | undefined,
extension: string,
): string {
return `${safeExportBaseName(title)}-${Date.now()}.${extension}`;
}
export function buildStandaloneHtml(args: {
title: string;
files: DesignExportFile[];
}): string {
const { title, files } = args;
const cssFiles = files.filter((f) => f.fileType === "css");
const htmlFiles = files.filter((f) => f.fileType === "html");
const jsxFiles = files.filter((f) => f.fileType === "jsx");
const indexHtml =
files.find((f) => f.filename === "index.html") ?? htmlFiles[0];
const combinedCss = cssFiles
.map((f) => f.content ?? "")
.join("\n\n")
.replace(/<\/style/gi, "<\\/style");
if (
indexHtml?.content &&
/]/i.test(indexHtml.content)
) {
let html = indexHtml.content;
// Merge non-index HTML/JSX files into the body of the standalone document
// so multi-file designs still ship in one bundle.
const extraBody = [...htmlFiles, ...jsxFiles]
.filter((f) => f !== indexHtml)
.map((f) => extractRenderableHtml(f.content ?? ""))
.join("\n\n");
if (extraBody.trim()) {
// Inline JS / template literals can contain `` strings, so favor
// the final document boundary.
const closeBody = html.lastIndexOf("");
if (closeBody !== -1) {
html = `${html.slice(0, closeBody)}${extraBody}\n${html.slice(closeBody)}`;
} else {
html = `${html}\n${extraBody}`;
}
}
// Idempotency: if a prior export already injected this CSS block, skip
// re-injection so repeated exports don't duplicate the style tag.
if (
combinedCss.trim() &&
!/