910 lines
24 KiB
TypeScript
910 lines
24 KiB
TypeScript
import { FolkShape } from "./folk-shape";
|
||
import { css, html } from "./tags";
|
||
|
||
const styles = css`
|
||
:host {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
min-width: 480px;
|
||
min-height: 560px;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: linear-gradient(135deg, #f59e0b, #ef4444);
|
||
color: white;
|
||
border-radius: 8px 8px 0 0;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: move;
|
||
}
|
||
|
||
.header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.header-actions button {
|
||
background: transparent;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.header-actions button:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100% - 36px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Phase: Ideation ── */
|
||
.ideation {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.ideation h3 {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.topic-input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
resize: none;
|
||
outline: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.topic-input:focus {
|
||
border-color: #f59e0b;
|
||
}
|
||
|
||
.options-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
select {
|
||
padding: 6px 10px;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
background: white;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
}
|
||
|
||
.generate-btn {
|
||
padding: 10px 20px;
|
||
background: linear-gradient(135deg, #f59e0b, #ef4444);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.generate-btn:hover { opacity: 0.9; }
|
||
.generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
|
||
/* ── Phase: Drafts / Feedback ── */
|
||
.pages-view {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.page-nav button {
|
||
padding: 4px 10px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 4px;
|
||
background: white;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.page-nav button:hover { background: #f1f5f9; }
|
||
.page-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
|
||
|
||
.page-dots {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.page-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #cbd5e1;
|
||
cursor: pointer;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.page-dot.active { background: #f59e0b; }
|
||
.page-dot.generated { background: #22c55e; }
|
||
.page-dot.generating { background: #f59e0b; animation: pulse 1s infinite; }
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
.page-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px;
|
||
}
|
||
|
||
/* ── Section rendering ── */
|
||
.section {
|
||
position: relative;
|
||
margin-bottom: 12px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.section:hover {
|
||
border-color: #f59e0b;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px 8px;
|
||
background: #f8fafc;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
font-size: 10px;
|
||
color: #94a3b8;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.section-actions {
|
||
display: flex;
|
||
gap: 2px;
|
||
}
|
||
|
||
.section-actions button {
|
||
padding: 2px 6px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
border-radius: 3px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.section-actions button:hover {
|
||
background: #e2e8f0;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.section-body {
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.section-text {
|
||
width: 100%;
|
||
border: none;
|
||
outline: none;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: #1e293b;
|
||
background: transparent;
|
||
resize: none;
|
||
min-height: 24px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-text.headline {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.section-text.subhead {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #475569;
|
||
}
|
||
|
||
.section-text.pullquote {
|
||
font-style: italic;
|
||
border-left: 3px solid #f59e0b;
|
||
padding-left: 10px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.section-image {
|
||
width: 100%;
|
||
border-radius: 4px;
|
||
display: block;
|
||
}
|
||
|
||
.section-image-placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 120px;
|
||
background: #f1f5f9;
|
||
border-radius: 4px;
|
||
color: #94a3b8;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ── Feedback input ── */
|
||
.feedback-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
padding: 4px 8px 8px;
|
||
background: #fffbeb;
|
||
border-top: 1px solid #fde68a;
|
||
}
|
||
|
||
.feedback-input {
|
||
flex: 1;
|
||
padding: 6px 8px;
|
||
border: 1px solid #fde68a;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
outline: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.feedback-input:focus { border-color: #f59e0b; }
|
||
|
||
.feedback-btn {
|
||
padding: 6px 10px;
|
||
background: #f59e0b;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.feedback-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
|
||
/* ── Bottom bar ── */
|
||
.bottom-bar {
|
||
padding: 8px 12px;
|
||
border-top: 1px solid #e2e8f0;
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.status {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
}
|
||
|
||
/* ── Loading ── */
|
||
.loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.spinner {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 3px solid #e2e8f0;
|
||
border-top-color: #f59e0b;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.error {
|
||
color: #ef4444;
|
||
padding: 12px;
|
||
background: #fef2f2;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
margin: 12px;
|
||
}
|
||
|
||
.placeholder {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #94a3b8;
|
||
text-align: center;
|
||
gap: 8px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
font-size: 48px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* ── Progress bar ── */
|
||
.progress-bar {
|
||
height: 3px;
|
||
background: #e2e8f0;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #f59e0b, #ef4444);
|
||
transition: width 0.5s ease;
|
||
}
|
||
`;
|
||
|
||
// ── Types ──
|
||
|
||
interface ZineSection {
|
||
id: string;
|
||
type: "text" | "image";
|
||
content?: string;
|
||
imagePrompt?: string;
|
||
imageUrl?: string;
|
||
}
|
||
|
||
interface ZinePage {
|
||
pageNumber: number;
|
||
type: "cover" | "content" | "cta";
|
||
title: string;
|
||
sections: ZineSection[];
|
||
hashtags: string[];
|
||
}
|
||
|
||
type ZinePhase = "ideation" | "generating" | "editing" | "complete";
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
"folk-zine-gen": FolkZineGen;
|
||
}
|
||
}
|
||
|
||
export class FolkZineGen extends FolkShape {
|
||
static override tagName = "folk-zine-gen";
|
||
|
||
static {
|
||
const sheet = new CSSStyleSheet();
|
||
const parentRules = Array.from(FolkShape.styles.cssRules)
|
||
.map((r) => r.cssText)
|
||
.join("\n");
|
||
const childRules = Array.from(styles.cssRules)
|
||
.map((r) => r.cssText)
|
||
.join("\n");
|
||
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||
this.styles = sheet;
|
||
}
|
||
|
||
#phase: ZinePhase = "ideation";
|
||
#pages: ZinePage[] = [];
|
||
#currentPage = 0;
|
||
#isLoading = false;
|
||
#error: string | null = null;
|
||
#style = "punk-zine";
|
||
#tone = "informative";
|
||
#topic = "";
|
||
#generatingPage = 0; // 0 = not generating
|
||
#regeneratingSection: string | null = null;
|
||
|
||
// DOM refs
|
||
#contentEl: HTMLElement | null = null;
|
||
|
||
override createRenderRoot() {
|
||
const root = super.createRenderRoot();
|
||
|
||
const wrapper = document.createElement("div");
|
||
wrapper.innerHTML = html`
|
||
<div class="header">
|
||
<span class="header-title">
|
||
<span>📰</span>
|
||
<span>Zine Generator</span>
|
||
</span>
|
||
<div class="header-actions">
|
||
<button class="reset-btn" title="Start over">↺</button>
|
||
<button class="close-btn" title="Close">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="content"></div>
|
||
`;
|
||
|
||
const slot = root.querySelector("slot");
|
||
const containerDiv = slot?.parentElement as HTMLElement;
|
||
if (containerDiv) {
|
||
containerDiv.replaceWith(wrapper);
|
||
}
|
||
|
||
this.#contentEl = wrapper.querySelector(".content");
|
||
const resetBtn = wrapper.querySelector(".reset-btn") as HTMLButtonElement;
|
||
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
|
||
|
||
resetBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.#reset();
|
||
});
|
||
|
||
closeBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.dispatchEvent(new CustomEvent("close"));
|
||
});
|
||
|
||
this.#render();
|
||
return root;
|
||
}
|
||
|
||
#reset() {
|
||
this.#phase = "ideation";
|
||
this.#pages = [];
|
||
this.#currentPage = 0;
|
||
this.#isLoading = false;
|
||
this.#error = null;
|
||
this.#generatingPage = 0;
|
||
this.#regeneratingSection = null;
|
||
this.#render();
|
||
}
|
||
|
||
#render() {
|
||
if (!this.#contentEl) return;
|
||
|
||
switch (this.#phase) {
|
||
case "ideation":
|
||
this.#renderIdeation();
|
||
break;
|
||
case "generating":
|
||
this.#renderGenerating();
|
||
break;
|
||
case "editing":
|
||
case "complete":
|
||
this.#renderEditing();
|
||
break;
|
||
}
|
||
}
|
||
|
||
// ── Ideation Phase ──
|
||
|
||
#renderIdeation() {
|
||
if (!this.#contentEl) return;
|
||
this.#contentEl.innerHTML = `
|
||
<div class="ideation">
|
||
<h3>Create a MycroZine</h3>
|
||
<textarea class="topic-input" placeholder="What's your zine about? e.g. 'The future of regenerative economics' or 'A guide to urban foraging'" rows="3">${this.#escapeHtml(this.#topic)}</textarea>
|
||
<div class="options-row">
|
||
<select class="style-select">
|
||
<option value="punk-zine"${this.#style === "punk-zine" ? " selected" : ""}>Punk Zine</option>
|
||
<option value="mycelial"${this.#style === "mycelial" ? " selected" : ""}>Mycelial</option>
|
||
<option value="minimal"${this.#style === "minimal" ? " selected" : ""}>Minimal</option>
|
||
<option value="collage"${this.#style === "collage" ? " selected" : ""}>Collage</option>
|
||
<option value="retro"${this.#style === "retro" ? " selected" : ""}>Retro</option>
|
||
<option value="academic"${this.#style === "academic" ? " selected" : ""}>Academic</option>
|
||
</select>
|
||
<select class="tone-select">
|
||
<option value="informative"${this.#tone === "informative" ? " selected" : ""}>Informative</option>
|
||
<option value="rebellious"${this.#tone === "rebellious" ? " selected" : ""}>Rebellious</option>
|
||
<option value="regenerative"${this.#tone === "regenerative" ? " selected" : ""}>Regenerative</option>
|
||
<option value="playful"${this.#tone === "playful" ? " selected" : ""}>Playful</option>
|
||
<option value="poetic"${this.#tone === "poetic" ? " selected" : ""}>Poetic</option>
|
||
</select>
|
||
</div>
|
||
<button class="generate-btn"${this.#isLoading ? " disabled" : ""}>
|
||
${this.#isLoading ? "Generating outline..." : "Generate Zine Outline"}
|
||
</button>
|
||
${this.#error ? `<div class="error">${this.#escapeHtml(this.#error)}</div>` : ""}
|
||
</div>
|
||
`;
|
||
|
||
const topicInput = this.#contentEl.querySelector(".topic-input") as HTMLTextAreaElement;
|
||
const styleSelect = this.#contentEl.querySelector(".style-select") as HTMLSelectElement;
|
||
const toneSelect = this.#contentEl.querySelector(".tone-select") as HTMLSelectElement;
|
||
const genBtn = this.#contentEl.querySelector(".generate-btn") as HTMLButtonElement;
|
||
|
||
topicInput?.addEventListener("input", () => { this.#topic = topicInput.value; });
|
||
topicInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||
styleSelect?.addEventListener("change", () => { this.#style = styleSelect.value; });
|
||
toneSelect?.addEventListener("change", () => { this.#tone = toneSelect.value; });
|
||
genBtn?.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.#generateOutline();
|
||
});
|
||
}
|
||
|
||
async #generateOutline() {
|
||
if (!this.#topic.trim() || this.#isLoading) return;
|
||
|
||
this.#isLoading = true;
|
||
this.#error = null;
|
||
this.#render();
|
||
|
||
try {
|
||
const res = await fetch("/api/zine/outline", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
topic: this.#topic,
|
||
style: this.#style,
|
||
tone: this.#tone,
|
||
}),
|
||
});
|
||
|
||
if (!res.ok) throw new Error(`Outline generation failed: ${res.statusText}`);
|
||
const data = await res.json();
|
||
this.#pages = data.pages || [];
|
||
this.#currentPage = 0;
|
||
this.#phase = "generating";
|
||
this.#isLoading = false;
|
||
this.#render();
|
||
|
||
// Start generating page images sequentially
|
||
await this.#generateAllPages();
|
||
} catch (e: any) {
|
||
this.#error = e.message;
|
||
this.#isLoading = false;
|
||
this.#render();
|
||
}
|
||
}
|
||
|
||
// ── Generating Phase ──
|
||
|
||
#renderGenerating() {
|
||
if (!this.#contentEl) return;
|
||
const total = this.#pages.length;
|
||
const progress = this.#generatingPage > 0 ? ((this.#generatingPage - 1) / total) * 100 : 0;
|
||
|
||
this.#contentEl.innerHTML = `
|
||
<div class="loading">
|
||
<div class="spinner"></div>
|
||
<span>Generating page ${this.#generatingPage} of ${total}...</span>
|
||
<div class="progress-bar" style="width: 200px;">
|
||
<div class="progress-fill" style="width: ${progress}%"></div>
|
||
</div>
|
||
<span style="font-size: 11px; color: #94a3b8;">${this.#pages[this.#generatingPage - 1]?.title || ""}</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
async #generateAllPages() {
|
||
for (let i = 0; i < this.#pages.length; i++) {
|
||
this.#generatingPage = i + 1;
|
||
this.#render();
|
||
|
||
try {
|
||
const res = await fetch("/api/zine/page", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
outline: this.#pages[i],
|
||
style: this.#style,
|
||
tone: this.#tone,
|
||
}),
|
||
});
|
||
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
// Update image URLs in sections
|
||
if (data.images) {
|
||
for (const section of this.#pages[i].sections) {
|
||
if (section.type === "image" && data.images[section.id]) {
|
||
section.imageUrl = data.images[section.id];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch (e: any) {
|
||
console.error(`[zine-gen] Page ${i + 1} generation failed:`, e.message);
|
||
}
|
||
}
|
||
|
||
this.#generatingPage = 0;
|
||
this.#phase = "editing";
|
||
this.#render();
|
||
}
|
||
|
||
// ── Editing Phase (with editable text + per-section regeneration) ──
|
||
|
||
#renderEditing() {
|
||
if (!this.#contentEl) return;
|
||
const page = this.#pages[this.#currentPage];
|
||
if (!page) return;
|
||
|
||
const total = this.#pages.length;
|
||
const dots = this.#pages.map((p, i) => {
|
||
const cls = i === this.#currentPage ? "active" : (p.sections.some(s => s.type === "image" && s.imageUrl) ? "generated" : "");
|
||
return `<button class="page-dot ${cls}" data-page="${i}" title="Page ${i + 1}: ${this.#escapeHtml(p.title)}"></button>`;
|
||
}).join("");
|
||
|
||
let sectionsHtml = "";
|
||
for (const section of page.sections) {
|
||
const isRegenerating = this.#regeneratingSection === section.id;
|
||
const sectionLabel = section.id.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
|
||
|
||
sectionsHtml += `<div class="section" data-section-id="${section.id}">`;
|
||
sectionsHtml += `<div class="section-header">
|
||
<span>${this.#escapeHtml(sectionLabel)}</span>
|
||
<div class="section-actions">
|
||
<button class="regen-section-btn" data-section-id="${section.id}" title="Regenerate this section"${isRegenerating ? " disabled" : ""}>
|
||
${isRegenerating ? "..." : "↻"}
|
||
</button>
|
||
</div>
|
||
</div>`;
|
||
|
||
if (section.type === "text") {
|
||
const textClass = section.id === "headline" ? "headline" :
|
||
section.id === "subhead" ? "subhead" :
|
||
section.id === "pullquote" ? "pullquote" : "";
|
||
sectionsHtml += `<div class="section-body">
|
||
<textarea class="section-text ${textClass}" data-section-id="${section.id}">${this.#escapeHtml(section.content || "")}</textarea>
|
||
</div>`;
|
||
} else if (section.type === "image") {
|
||
sectionsHtml += `<div class="section-body">`;
|
||
if (section.imageUrl) {
|
||
sectionsHtml += `<img class="section-image" src="${this.#escapeHtml(section.imageUrl)}" alt="${this.#escapeHtml(section.imagePrompt || "")}" loading="lazy" />`;
|
||
} else {
|
||
sectionsHtml += `<div class="section-image-placeholder">${isRegenerating ? '<div class="spinner" style="width:24px;height:24px;"></div>' : "No image yet — click ↻ to generate"}</div>`;
|
||
}
|
||
sectionsHtml += `</div>`;
|
||
}
|
||
|
||
// Feedback row for regeneration
|
||
sectionsHtml += `<div class="feedback-row" style="display:none" data-feedback-for="${section.id}">
|
||
<input class="feedback-input" data-section-id="${section.id}" placeholder="Describe changes..." />
|
||
<button class="feedback-btn" data-section-id="${section.id}">Regen</button>
|
||
</div>`;
|
||
|
||
sectionsHtml += `</div>`;
|
||
}
|
||
|
||
this.#contentEl.innerHTML = `
|
||
<div class="page-nav">
|
||
<button class="prev-btn"${this.#currentPage === 0 ? " disabled" : ""}>← Prev</button>
|
||
<div class="page-dots">${dots}</div>
|
||
<button class="next-btn"${this.#currentPage >= total - 1 ? " disabled" : ""}>Next →</button>
|
||
</div>
|
||
<div class="page-content">
|
||
<div style="font-size:11px; color:#94a3b8; margin-bottom:8px;">
|
||
Page ${page.pageNumber} of ${total} — <strong>${this.#escapeHtml(page.title)}</strong>
|
||
${page.hashtags?.length ? `<span style="margin-left:8px;">${page.hashtags.map(t => this.#escapeHtml(t)).join(" ")}</span>` : ""}
|
||
</div>
|
||
${sectionsHtml}
|
||
</div>
|
||
<div class="bottom-bar">
|
||
<span class="status">${this.#phase === "complete" ? "Complete" : "Editing — click text to edit, ↻ to regenerate sections"}</span>
|
||
<button class="generate-btn" style="padding:6px 12px; font-size:11px;">Download All</button>
|
||
</div>
|
||
${this.#error ? `<div class="error">${this.#escapeHtml(this.#error)}</div>` : ""}
|
||
`;
|
||
|
||
// ── Wire up event listeners ──
|
||
|
||
// Page navigation
|
||
this.#contentEl.querySelector(".prev-btn")?.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (this.#currentPage > 0) { this.#currentPage--; this.#render(); }
|
||
});
|
||
this.#contentEl.querySelector(".next-btn")?.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (this.#currentPage < this.#pages.length - 1) { this.#currentPage++; this.#render(); }
|
||
});
|
||
|
||
// Page dots
|
||
for (const dot of this.#contentEl.querySelectorAll(".page-dot")) {
|
||
dot.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.#currentPage = parseInt((dot as HTMLElement).dataset.page || "0");
|
||
this.#render();
|
||
});
|
||
}
|
||
|
||
// Editable text areas — auto-resize and save
|
||
for (const textarea of this.#contentEl.querySelectorAll(".section-text") as NodeListOf<HTMLTextAreaElement>) {
|
||
// Auto-resize
|
||
const autoResize = () => {
|
||
textarea.style.height = "auto";
|
||
textarea.style.height = textarea.scrollHeight + "px";
|
||
};
|
||
autoResize();
|
||
textarea.addEventListener("input", () => {
|
||
autoResize();
|
||
const sectionId = textarea.dataset.sectionId;
|
||
if (sectionId) {
|
||
const section = page.sections.find(s => s.id === sectionId);
|
||
if (section) section.content = textarea.value;
|
||
}
|
||
});
|
||
textarea.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||
}
|
||
|
||
// Regenerate section buttons — show feedback row
|
||
for (const btn of this.#contentEl.querySelectorAll(".regen-section-btn") as NodeListOf<HTMLButtonElement>) {
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
const sectionId = btn.dataset.sectionId!;
|
||
const feedbackRow = this.#contentEl!.querySelector(`[data-feedback-for="${sectionId}"]`) as HTMLElement;
|
||
if (feedbackRow) {
|
||
const isVisible = feedbackRow.style.display !== "none";
|
||
// Hide all feedback rows first
|
||
for (const row of this.#contentEl!.querySelectorAll(".feedback-row") as NodeListOf<HTMLElement>) {
|
||
row.style.display = "none";
|
||
}
|
||
feedbackRow.style.display = isVisible ? "none" : "flex";
|
||
if (!isVisible) {
|
||
const input = feedbackRow.querySelector(".feedback-input") as HTMLInputElement;
|
||
input?.focus();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Feedback submit buttons
|
||
for (const btn of this.#contentEl.querySelectorAll(".feedback-btn") as NodeListOf<HTMLButtonElement>) {
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
const sectionId = btn.dataset.sectionId!;
|
||
const input = this.#contentEl!.querySelector(`.feedback-input[data-section-id="${sectionId}"]`) as HTMLInputElement;
|
||
const feedback = input?.value.trim() || "";
|
||
this.#regenerateSection(sectionId, feedback);
|
||
});
|
||
}
|
||
|
||
// Feedback input enter key
|
||
for (const input of this.#contentEl.querySelectorAll(".feedback-input") as NodeListOf<HTMLInputElement>) {
|
||
input.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
const sectionId = input.dataset.sectionId!;
|
||
this.#regenerateSection(sectionId, input.value.trim());
|
||
}
|
||
});
|
||
input.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||
}
|
||
|
||
// Download button
|
||
this.#contentEl.querySelector(".bottom-bar .generate-btn")?.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.#downloadZine();
|
||
});
|
||
}
|
||
|
||
async #regenerateSection(sectionId: string, feedback: string) {
|
||
const page = this.#pages[this.#currentPage];
|
||
const section = page?.sections.find(s => s.id === sectionId);
|
||
if (!section) return;
|
||
|
||
this.#regeneratingSection = sectionId;
|
||
this.#error = null;
|
||
this.#render();
|
||
|
||
try {
|
||
const res = await fetch("/api/zine/regenerate-section", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
section,
|
||
pageTitle: page.title,
|
||
style: this.#style,
|
||
tone: this.#tone,
|
||
feedback,
|
||
}),
|
||
});
|
||
|
||
if (!res.ok) throw new Error(`Regeneration failed: ${res.statusText}`);
|
||
const data = await res.json();
|
||
|
||
if (data.type === "text" && data.content) {
|
||
section.content = data.content;
|
||
} else if (data.type === "image" && data.url) {
|
||
section.imageUrl = data.url;
|
||
}
|
||
} catch (e: any) {
|
||
this.#error = e.message;
|
||
} finally {
|
||
this.#regeneratingSection = null;
|
||
this.#render();
|
||
}
|
||
}
|
||
|
||
#downloadZine() {
|
||
// Create a simple HTML document with all pages for printing
|
||
const pagesHtml = this.#pages.map(page => {
|
||
const sectionsHtml = page.sections.map(s => {
|
||
if (s.type === "text") {
|
||
const tag = s.id === "headline" ? "h1" : s.id === "subhead" ? "h2" : s.id === "pullquote" ? "blockquote" : "p";
|
||
return `<${tag}>${this.#escapeHtml(s.content || "")}</${tag}>`;
|
||
}
|
||
if (s.type === "image" && s.imageUrl) {
|
||
return `<img src="${this.#escapeHtml(s.imageUrl)}" style="max-width:100%;border-radius:8px;" />`;
|
||
}
|
||
return "";
|
||
}).join("\n");
|
||
|
||
return `<div class="zine-page" style="page-break-after:always;padding:32px;max-width:600px;margin:0 auto;">
|
||
${sectionsHtml}
|
||
<div style="font-size:10px;color:#999;margin-top:16px;">${page.hashtags?.join(" ") || ""}</div>
|
||
</div>`;
|
||
}).join("\n");
|
||
|
||
const doc = `<!DOCTYPE html>
|
||
<html><head><meta charset="utf-8"><title>MycroZine: ${this.#escapeHtml(this.#topic)}</title>
|
||
<style>body{font-family:sans-serif;margin:0}h1{font-size:28px}h2{font-size:18px;color:#666}blockquote{border-left:4px solid #f59e0b;padding-left:16px;font-style:italic;color:#666}p{line-height:1.6;font-size:14px}@media print{.zine-page{page-break-after:always}}</style>
|
||
</head><body>${pagesHtml}</body></html>`;
|
||
|
||
const blob = new Blob([doc], { type: "text/html" });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = `mycrozine-${Date.now()}.html`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
#escapeHtml(text: string): string {
|
||
const div = document.createElement("div");
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
override toJSON() {
|
||
return {
|
||
...super.toJSON(),
|
||
type: "folk-zine-gen",
|
||
phase: this.#phase,
|
||
topic: this.#topic,
|
||
style: this.#style,
|
||
tone: this.#tone,
|
||
pages: this.#pages,
|
||
currentPage: this.#currentPage,
|
||
};
|
||
}
|
||
}
|