30 lines
2.2 KiB
TypeScript
30 lines
2.2 KiB
TypeScript
export const studioHelpScript = `(() => {
|
|
let failed = false;
|
|
function report() {
|
|
const state = document.getElementById("validation-state");
|
|
const diagnostics = document.getElementById("diagnostics");
|
|
if (state && state.textContent === "Checking") {
|
|
state.textContent = "Editor could not start";
|
|
if (diagnostics) diagnostics.textContent = "The editor script could not initialize. Reload the page after updating the server. Your saved draft has not been deleted.";
|
|
}
|
|
}
|
|
function fail() { failed = true; report(); }
|
|
window.addEventListener("error", fail, true);
|
|
window.addEventListener("unhandledrejection", fail);
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (failed) report();
|
|
const button = document.querySelector('[data-tab="guided"]');
|
|
if (button) button.click();
|
|
});
|
|
})();`;
|
|
|
|
export function addStudioGuide(html: string, configured: boolean) {
|
|
const guide = `<details open class="help"><summary><strong>How to use Design Studio</strong></summary><ol><li><strong>Describe your website.</strong> Open Guided design, enter your product and audience, then choose colors, shapes and spacing with Next.</li><li><strong>Generate and compare.</strong> Click Generate three directions, review an alternative, then choose Use reviewed proposal.</li><li><strong>Refine it.</strong> Try “make buttons square and use blue as the primary color” under Edit with words. Lock decisions you want to keep.</li><li><strong>Use it in your app.</strong> Open Review & apply and export Theme config or Compiled CSS. This website previews and exports designs; it does not change your deployed app automatically.</li></ol><p>${configured ? "APIMart AI is enabled with gpt-6-luna. Generation sends your brief and current design to APIMart only when you request it." : "AI is not configured. Local presets and supported rule-based edits still work. Set APIMART_API_KEY in the server .env and restart to enable gpt-6-luna."}</p></details>`;
|
|
return html
|
|
.replace(
|
|
'<script type="module"',
|
|
'<script src="./site-help.js"></script><script type="module"',
|
|
)
|
|
.replace('<div id="diagnostics"', guide + '<div id="diagnostics"');
|
|
}
|