1223 lines
40 KiB
TypeScript
1223 lines
40 KiB
TypeScript
import {
|
||
BaseBoxShapeUtil,
|
||
Geometry2d,
|
||
HTMLContainer,
|
||
Rectangle2d,
|
||
TLBaseShape,
|
||
TLShapeId,
|
||
createShapeId,
|
||
} from "tldraw"
|
||
import React, { useState, useRef, useEffect } from "react"
|
||
import { StandardizedToolWrapper } from "@/components/StandardizedToolWrapper"
|
||
import { usePinnedToView } from "@/hooks/usePinnedToView"
|
||
import { useMaximize } from "@/hooks/useMaximize"
|
||
// Uses zine.jeffemmett.com API for full zine generation workflow:
|
||
// - /api/outline - AI-generated 8-page outlines via Gemini
|
||
// - /api/generate-page - Individual page image generation via RunPod
|
||
// - /api/regenerate-page - Page regeneration with feedback
|
||
// - /api/print-layout - 300 DPI print-ready layout generation
|
||
|
||
const ZINE_API_BASE = 'https://zine.jeffemmett.com'
|
||
|
||
// ============================================================================
|
||
// Types
|
||
// ============================================================================
|
||
|
||
type ZinePhase = 'ideation' | 'drafts' | 'feedback' | 'finalizing' | 'complete'
|
||
|
||
type ZineStyle = 'punk-zine' | 'minimal' | 'collage' | 'retro' | 'academic'
|
||
type ZineTone = 'rebellious' | 'playful' | 'informative' | 'poetic'
|
||
|
||
interface ChatMessage {
|
||
id: string
|
||
role: 'user' | 'assistant'
|
||
content: string
|
||
timestamp: number
|
||
}
|
||
|
||
interface ZinePageOutline {
|
||
pageNumber: number // 1-8
|
||
type: 'cover' | 'content' | 'cta'
|
||
title: string
|
||
subtitle?: string
|
||
keyPoints: string[]
|
||
hashtags: string[]
|
||
imagePrompt: string
|
||
}
|
||
|
||
interface GeneratedZinePage {
|
||
pageNumber: number
|
||
imageUrl: string
|
||
shapeId?: string // Canvas shape ID if spawned
|
||
outline: ZinePageOutline
|
||
generationPrompt: string
|
||
timestamp: number
|
||
version: number // 1=draft, 2+=refined
|
||
}
|
||
|
||
interface PageFeedback {
|
||
pageNumber: number
|
||
feedbackText: string
|
||
requestedChanges: string[]
|
||
approved: boolean
|
||
}
|
||
|
||
interface ZineTemplate {
|
||
id: string
|
||
name: string
|
||
topic: string
|
||
style: ZineStyle
|
||
tone: ZineTone
|
||
pages: GeneratedZinePage[]
|
||
createdAt: number
|
||
}
|
||
|
||
type IMycroZineGenerator = TLBaseShape<
|
||
"MycroZineGenerator",
|
||
{
|
||
w: number
|
||
h: number
|
||
|
||
// Zine Identity
|
||
zineId: string
|
||
title: string
|
||
topic: string
|
||
style: ZineStyle
|
||
tone: ZineTone
|
||
|
||
// Phase State
|
||
phase: ZinePhase
|
||
|
||
// Ideation Phase
|
||
ideationMessages: ChatMessage[]
|
||
contentOutline: ZinePageOutline[] | null
|
||
|
||
// Drafts Phase
|
||
draftPages: GeneratedZinePage[]
|
||
spawnedShapeIds: string[]
|
||
currentGeneratingPage: number // 0 = not generating, 1-8 = generating that page
|
||
|
||
// Feedback Phase
|
||
pageFeedback: PageFeedback[]
|
||
|
||
// Final Phase
|
||
finalPages: GeneratedZinePage[]
|
||
printLayoutUrl: string | null
|
||
|
||
// UI State
|
||
isLoading: boolean
|
||
error: string | null
|
||
tags: string[]
|
||
pinnedToView: boolean
|
||
}
|
||
>
|
||
|
||
// ============================================================================
|
||
// Constants
|
||
// ============================================================================
|
||
|
||
const STYLES: Record<ZineStyle, string> = {
|
||
'punk-zine': 'Xerox texture, high contrast B&W, DIY collage, hand-drawn typography',
|
||
'minimal': 'Clean lines, white space, modern sans-serif, subtle gradients',
|
||
'collage': 'Layered imagery, mixed media textures, vintage photographs',
|
||
'retro': '1970s aesthetic, earth tones, groovy typography, halftone patterns',
|
||
'academic': 'Diagram-heavy, annotated illustrations, infographic elements',
|
||
}
|
||
|
||
const TONES: Record<ZineTone, string> = {
|
||
'rebellious': 'Defiant, anti-establishment, punk energy',
|
||
'playful': 'Fun, whimsical, approachable',
|
||
'informative': 'Educational, clear, accessible',
|
||
'poetic': 'Lyrical, metaphorical, evocative',
|
||
}
|
||
|
||
const PAGE_TEMPLATES = [
|
||
{ type: 'cover', description: 'Bold title, subtitle, visual hook' },
|
||
{ type: 'content', description: 'Key concepts with visual explanations' },
|
||
{ type: 'content', description: 'Deep dive on main topic' },
|
||
{ type: 'content', description: 'Supporting information' },
|
||
{ type: 'content', description: 'Practical applications' },
|
||
{ type: 'content', description: 'Community or movement aspect' },
|
||
{ type: 'content', description: 'Philosophy or manifesto' },
|
||
{ type: 'cta', description: 'Call-to-action with QR codes' },
|
||
]
|
||
|
||
// ============================================================================
|
||
// Shape Util
|
||
// ============================================================================
|
||
|
||
export class MycroZineGeneratorShape extends BaseBoxShapeUtil<IMycroZineGenerator> {
|
||
static override type = "MycroZineGenerator" as const
|
||
|
||
// Mycro-zine theme color: Punk green
|
||
static readonly PRIMARY_COLOR = "#00ff00"
|
||
static readonly SECONDARY_COLOR = "#1a1a1a"
|
||
|
||
MIN_WIDTH = 400 as const
|
||
MIN_HEIGHT = 500 as const
|
||
DEFAULT_WIDTH = 450 as const
|
||
DEFAULT_HEIGHT = 600 as const
|
||
|
||
getDefaultProps(): IMycroZineGenerator["props"] {
|
||
return {
|
||
w: this.DEFAULT_WIDTH,
|
||
h: this.DEFAULT_HEIGHT,
|
||
|
||
zineId: `zine_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||
title: '',
|
||
topic: '',
|
||
style: 'punk-zine',
|
||
tone: 'rebellious',
|
||
|
||
phase: 'ideation',
|
||
|
||
ideationMessages: [],
|
||
contentOutline: null,
|
||
|
||
draftPages: [],
|
||
spawnedShapeIds: [],
|
||
currentGeneratingPage: 0,
|
||
|
||
pageFeedback: [],
|
||
|
||
finalPages: [],
|
||
printLayoutUrl: null,
|
||
|
||
isLoading: false,
|
||
error: null,
|
||
tags: ['zine', 'mycrozine', 'print'],
|
||
pinnedToView: false,
|
||
}
|
||
}
|
||
|
||
getGeometry(shape: IMycroZineGenerator): Geometry2d {
|
||
return new Rectangle2d({
|
||
width: Math.max(shape.props.w, 1),
|
||
height: Math.max(shape.props.h, 1),
|
||
isFilled: true,
|
||
})
|
||
}
|
||
|
||
component(shape: IMycroZineGenerator) {
|
||
const editor = this.editor
|
||
const isSelected = editor.getSelectedShapeIds().includes(shape.id)
|
||
|
||
usePinnedToView(editor, shape.id, shape.props.pinnedToView)
|
||
|
||
const { isMaximized, toggleMaximize } = useMaximize({
|
||
editor: editor,
|
||
shapeId: shape.id,
|
||
currentW: shape.props.w,
|
||
currentH: shape.props.h,
|
||
shapeType: 'MycroZineGenerator',
|
||
})
|
||
|
||
const [isMinimized, setIsMinimized] = useState(false)
|
||
const [inputValue, setInputValue] = useState('')
|
||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||
|
||
// Scroll to bottom of messages
|
||
useEffect(() => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||
}, [shape.props.ideationMessages])
|
||
|
||
const handlePinToggle = () => {
|
||
editor.updateShape<IMycroZineGenerator>({
|
||
id: shape.id,
|
||
type: "MycroZineGenerator",
|
||
props: { pinnedToView: !shape.props.pinnedToView },
|
||
})
|
||
}
|
||
|
||
const handleClose = () => {
|
||
editor.deleteShape(shape.id)
|
||
}
|
||
|
||
const handleMinimize = () => {
|
||
setIsMinimized(!isMinimized)
|
||
}
|
||
|
||
const handleTagsChange = (newTags: string[]) => {
|
||
editor.updateShape<IMycroZineGenerator>({
|
||
id: shape.id,
|
||
type: "MycroZineGenerator",
|
||
props: { tags: newTags },
|
||
})
|
||
}
|
||
|
||
// Update shape props helper
|
||
const updateProps = (updates: Partial<IMycroZineGenerator["props"]>) => {
|
||
editor.updateShape<IMycroZineGenerator>({
|
||
id: shape.id,
|
||
type: "MycroZineGenerator",
|
||
props: updates,
|
||
})
|
||
}
|
||
|
||
// Add a chat message
|
||
const addMessage = (role: 'user' | 'assistant', content: string) => {
|
||
const newMessage: ChatMessage = {
|
||
id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||
role,
|
||
content,
|
||
timestamp: Date.now(),
|
||
}
|
||
updateProps({
|
||
ideationMessages: [...shape.props.ideationMessages, newMessage],
|
||
})
|
||
return newMessage
|
||
}
|
||
|
||
// Generate content outline from ideation using AI API
|
||
const generateOutline = async () => {
|
||
if (!shape.props.topic) {
|
||
updateProps({ error: 'Please enter a topic first' })
|
||
return
|
||
}
|
||
|
||
updateProps({ isLoading: true, error: null })
|
||
|
||
try {
|
||
// Call the standalone zine API for AI-generated outline
|
||
const response = await fetch(`${ZINE_API_BASE}/api/outline`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
topic: shape.props.topic,
|
||
style: shape.props.style,
|
||
tone: shape.props.tone,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({})) as { error?: string }
|
||
throw new Error(errorData.error || `API error: ${response.status}`)
|
||
}
|
||
|
||
const data = await response.json() as {
|
||
id: string
|
||
outline: Array<{
|
||
pageNumber: number
|
||
type: string
|
||
title: string
|
||
keyPoints: string[]
|
||
imagePrompt: string
|
||
}>
|
||
}
|
||
|
||
// Convert API response to our outline format
|
||
const outline: ZinePageOutline[] = data.outline.map((page) => ({
|
||
pageNumber: page.pageNumber,
|
||
type: page.type as 'cover' | 'content' | 'cta',
|
||
title: page.title,
|
||
subtitle: undefined,
|
||
keyPoints: page.keyPoints,
|
||
hashtags: [],
|
||
imagePrompt: page.imagePrompt,
|
||
}))
|
||
|
||
// Store the zine ID from the API for later use
|
||
const newZineId = data.id
|
||
|
||
// Add assistant message with outline summary
|
||
addMessage('assistant', `Great! I've created an AI-generated outline for your "${shape.props.topic}" zine:\n\n${outline.map(p => `Page ${p.pageNumber}: ${p.title}\n • ${p.keyPoints.slice(0, 2).join('\n • ')}`).join('\n\n')}\n\nClick "Generate Drafts" when you're ready to create the pages!`)
|
||
|
||
updateProps({
|
||
zineId: newZineId,
|
||
contentOutline: outline,
|
||
title: outline[0]?.title || shape.props.topic.toUpperCase(),
|
||
isLoading: false,
|
||
})
|
||
} catch (err) {
|
||
console.error('Outline generation error:', err)
|
||
updateProps({
|
||
isLoading: false,
|
||
error: `Failed to generate outline: ${err instanceof Error ? err.message : String(err)}`,
|
||
})
|
||
}
|
||
}
|
||
|
||
// Handle user message in ideation phase
|
||
const handleSendMessage = async () => {
|
||
const message = inputValue.trim()
|
||
if (!message) return
|
||
|
||
setInputValue('')
|
||
addMessage('user', message)
|
||
|
||
// If this is the first message and no topic set, use it as topic
|
||
if (!shape.props.topic && shape.props.ideationMessages.length === 0) {
|
||
updateProps({ topic: message })
|
||
|
||
// Auto-respond
|
||
setTimeout(() => {
|
||
addMessage('assistant', `Let's create an 8-page zine about "${message}"!\n\nI'll use the ${shape.props.style} style with a ${shape.props.tone} tone.\n\nFeel free to:\n• Add more details about what to cover\n• Specify any key points or themes\n• Change the style/tone using the dropdowns\n\nOr click "Generate Outline" to proceed!`)
|
||
}, 500)
|
||
} else {
|
||
// Continue conversation
|
||
setTimeout(() => {
|
||
addMessage('assistant', `Got it! I'll incorporate that into the zine. ${shape.props.contentOutline ? 'Ready to generate drafts!' : 'Click "Generate Outline" when ready.'}`)
|
||
}, 500)
|
||
}
|
||
}
|
||
|
||
// Generate draft pages using the standalone zine API
|
||
const generateDrafts = async () => {
|
||
if (!shape.props.contentOutline) {
|
||
await generateOutline()
|
||
if (!shape.props.contentOutline) return
|
||
}
|
||
|
||
updateProps({
|
||
phase: 'drafts',
|
||
isLoading: true,
|
||
error: null,
|
||
currentGeneratingPage: 1,
|
||
})
|
||
|
||
const outline = shape.props.contentOutline!
|
||
const zineId = shape.props.zineId
|
||
const generatedPages: GeneratedZinePage[] = []
|
||
|
||
for (let i = 0; i < outline.length; i++) {
|
||
const pageOutline = outline[i]
|
||
updateProps({ currentGeneratingPage: i + 1 })
|
||
|
||
try {
|
||
// Call the standalone zine API for page generation
|
||
const response = await fetch(`${ZINE_API_BASE}/api/generate-page`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
zineId: zineId,
|
||
pageNumber: i + 1,
|
||
outline: pageOutline,
|
||
style: shape.props.style,
|
||
tone: shape.props.tone,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({})) as { error?: string }
|
||
throw new Error(errorData.error || `API error: ${response.status}`)
|
||
}
|
||
|
||
const data = await response.json() as { pageNumber: number; imageUrl: string; success: boolean }
|
||
|
||
// Use the API-returned image URL
|
||
const imageUrl = `${ZINE_API_BASE}${data.imageUrl}`
|
||
|
||
generatedPages.push({
|
||
pageNumber: i + 1,
|
||
imageUrl,
|
||
outline: pageOutline,
|
||
generationPrompt: pageOutline.imagePrompt,
|
||
timestamp: Date.now(),
|
||
version: 1,
|
||
})
|
||
|
||
// Spawn image on canvas
|
||
const spawnedId = await spawnPageOnCanvas(editor, imageUrl, i, shape)
|
||
if (spawnedId) {
|
||
generatedPages[generatedPages.length - 1].shapeId = spawnedId
|
||
}
|
||
|
||
updateProps({ draftPages: [...generatedPages] })
|
||
} catch (err) {
|
||
console.error(`Failed to generate page ${i + 1}:`, err)
|
||
updateProps({
|
||
error: `Failed to generate page ${i + 1}: ${err instanceof Error ? err.message : String(err)}`,
|
||
})
|
||
// Continue with remaining pages even if one fails
|
||
}
|
||
}
|
||
|
||
// Initialize feedback for all pages
|
||
const initialFeedback: PageFeedback[] = outline.map((_, i) => ({
|
||
pageNumber: i + 1,
|
||
feedbackText: '',
|
||
requestedChanges: [],
|
||
approved: false,
|
||
}))
|
||
|
||
updateProps({
|
||
draftPages: generatedPages,
|
||
pageFeedback: initialFeedback,
|
||
spawnedShapeIds: generatedPages.map(p => p.shapeId).filter(Boolean) as string[],
|
||
isLoading: false,
|
||
currentGeneratingPage: 0,
|
||
phase: generatedPages.length === 8 ? 'feedback' : 'drafts',
|
||
})
|
||
}
|
||
|
||
// Approve a page
|
||
const approvePage = (pageNumber: number) => {
|
||
const newFeedback = shape.props.pageFeedback.map(f =>
|
||
f.pageNumber === pageNumber ? { ...f, approved: true } : f
|
||
)
|
||
updateProps({ pageFeedback: newFeedback })
|
||
}
|
||
|
||
// Add feedback to a page
|
||
const addPageFeedback = (pageNumber: number, feedback: string) => {
|
||
const newFeedback = shape.props.pageFeedback.map(f =>
|
||
f.pageNumber === pageNumber
|
||
? { ...f, feedbackText: feedback, requestedChanges: [feedback] }
|
||
: f
|
||
)
|
||
updateProps({ pageFeedback: newFeedback })
|
||
}
|
||
|
||
// Check if all pages are approved or have feedback
|
||
const allPagesReviewed = shape.props.pageFeedback.every(
|
||
f => f.approved || f.feedbackText.length > 0
|
||
)
|
||
|
||
// Move to finalization - regenerate pages with feedback using API
|
||
const startFinalization = async () => {
|
||
const pagesNeedingUpdate = shape.props.pageFeedback.filter(f => !f.approved && f.feedbackText)
|
||
|
||
if (pagesNeedingUpdate.length === 0) {
|
||
// All approved, skip to complete
|
||
updateProps({
|
||
phase: 'complete',
|
||
finalPages: shape.props.draftPages,
|
||
})
|
||
return
|
||
}
|
||
|
||
updateProps({
|
||
phase: 'finalizing',
|
||
isLoading: true,
|
||
error: null,
|
||
})
|
||
|
||
const finalPages = [...shape.props.draftPages]
|
||
const zineId = shape.props.zineId
|
||
|
||
for (const feedback of pagesNeedingUpdate) {
|
||
updateProps({ currentGeneratingPage: feedback.pageNumber })
|
||
|
||
try {
|
||
const originalPage = shape.props.draftPages.find(p => p.pageNumber === feedback.pageNumber)
|
||
if (!originalPage) continue
|
||
|
||
// Call the standalone API to regenerate with feedback
|
||
const response = await fetch(`${ZINE_API_BASE}/api/regenerate-page`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
zineId: zineId,
|
||
pageNumber: feedback.pageNumber,
|
||
currentOutline: originalPage.outline,
|
||
feedback: feedback.feedbackText,
|
||
style: shape.props.style,
|
||
tone: shape.props.tone,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({})) as { error?: string }
|
||
throw new Error(errorData.error || `API error: ${response.status}`)
|
||
}
|
||
|
||
const data = await response.json() as {
|
||
imageUrl: string
|
||
updatedOutline: ZinePageOutline
|
||
}
|
||
|
||
const imageUrl = `${ZINE_API_BASE}${data.imageUrl}`
|
||
|
||
finalPages[feedback.pageNumber - 1] = {
|
||
...originalPage,
|
||
imageUrl,
|
||
outline: data.updatedOutline || originalPage.outline,
|
||
generationPrompt: data.updatedOutline?.imagePrompt || originalPage.generationPrompt,
|
||
timestamp: Date.now(),
|
||
version: originalPage.version + 1,
|
||
}
|
||
} catch (err) {
|
||
console.error(`Failed to regenerate page ${feedback.pageNumber}:`, err)
|
||
updateProps({
|
||
error: `Failed to regenerate page ${feedback.pageNumber}: ${err instanceof Error ? err.message : String(err)}`,
|
||
})
|
||
}
|
||
}
|
||
|
||
updateProps({
|
||
finalPages,
|
||
isLoading: false,
|
||
currentGeneratingPage: 0,
|
||
phase: 'complete',
|
||
})
|
||
}
|
||
|
||
// Generate print layout using the standalone API (300 DPI, proper folding order)
|
||
const generatePrintLayout = async () => {
|
||
updateProps({ isLoading: true, error: null })
|
||
|
||
try {
|
||
const zineId = shape.props.zineId
|
||
const zineName = (shape.props.title || shape.props.topic).slice(0, 20).replace(/[^a-zA-Z0-9]/g, '_')
|
||
|
||
// Call the standalone API for print layout generation
|
||
const response = await fetch(`${ZINE_API_BASE}/api/print-layout`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
zineId: zineId,
|
||
zineName: zineName,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({})) as { error?: string }
|
||
throw new Error(errorData.error || `API error: ${response.status}`)
|
||
}
|
||
|
||
const data = await response.json() as {
|
||
success: boolean
|
||
printLayoutUrl: string
|
||
filename: string
|
||
}
|
||
|
||
const printUrl = `${ZINE_API_BASE}${data.printLayoutUrl}`
|
||
|
||
updateProps({
|
||
printLayoutUrl: printUrl,
|
||
isLoading: false,
|
||
})
|
||
|
||
addMessage('assistant', `🖨️ Print layout generated at 300 DPI!\n\nDownload and print on 8.5" × 11" paper (landscape).\n\nFolding instructions:\n1. Fold in half lengthwise (hotdog fold)\n2. Fold in half again\n3. Fold once more to create booklet\n4. Unfold and cut center slit\n5. Refold and push ends together\n6. Pages should now be in order 1-8!`)
|
||
} catch (err) {
|
||
console.error('Print layout error:', err)
|
||
updateProps({
|
||
isLoading: false,
|
||
error: `Failed to generate print layout: ${err instanceof Error ? err.message : String(err)}`,
|
||
})
|
||
}
|
||
}
|
||
|
||
// Save as template
|
||
const saveAsTemplate = () => {
|
||
const template: ZineTemplate = {
|
||
id: shape.props.zineId,
|
||
name: shape.props.title || shape.props.topic,
|
||
topic: shape.props.topic,
|
||
style: shape.props.style,
|
||
tone: shape.props.tone,
|
||
pages: shape.props.finalPages.length > 0 ? shape.props.finalPages : shape.props.draftPages,
|
||
createdAt: Date.now(),
|
||
}
|
||
|
||
// Save to localStorage
|
||
const templates = JSON.parse(localStorage.getItem('mycrozine_templates') || '[]')
|
||
templates.push(template)
|
||
localStorage.setItem('mycrozine_templates', JSON.stringify(templates))
|
||
|
||
addMessage('assistant', `Template "${template.name}" saved! You can reprint it anytime from the template library.`)
|
||
}
|
||
|
||
// Render phase-specific content
|
||
const renderPhaseContent = () => {
|
||
switch (shape.props.phase) {
|
||
case 'ideation':
|
||
return renderIdeationPhase()
|
||
case 'drafts':
|
||
return renderDraftsPhase()
|
||
case 'feedback':
|
||
return renderFeedbackPhase()
|
||
case 'finalizing':
|
||
return renderFinalizingPhase()
|
||
case 'complete':
|
||
return renderCompletePhase()
|
||
default:
|
||
return null
|
||
}
|
||
}
|
||
|
||
// ========== IDEATION PHASE ==========
|
||
const renderIdeationPhase = () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '12px' }}>
|
||
{/* Style/Tone selectors */}
|
||
<div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
|
||
<select
|
||
value={shape.props.style}
|
||
onChange={(e) => updateProps({ style: e.target.value as ZineStyle })}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={selectStyle}
|
||
>
|
||
{Object.keys(STYLES).map(s => (
|
||
<option key={s} value={s}>{s}</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
value={shape.props.tone}
|
||
onChange={(e) => updateProps({ tone: e.target.value as ZineTone })}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={selectStyle}
|
||
>
|
||
{Object.keys(TONES).map(t => (
|
||
<option key={t} value={t}>{t}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Chat messages */}
|
||
<div style={{
|
||
flex: 1,
|
||
overflow: 'auto',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
padding: '8px',
|
||
backgroundColor: '#1a1a1a',
|
||
borderRadius: '6px',
|
||
}}>
|
||
{shape.props.ideationMessages.length === 0 && (
|
||
<div style={{ color: '#666', fontSize: '13px', textAlign: 'center', padding: '20px' }}>
|
||
What topic would you like to make a zine about?
|
||
</div>
|
||
)}
|
||
{shape.props.ideationMessages.map((msg) => (
|
||
<div
|
||
key={msg.id}
|
||
style={{
|
||
padding: '8px 12px',
|
||
borderRadius: '8px',
|
||
maxWidth: '85%',
|
||
alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
|
||
backgroundColor: msg.role === 'user' ? MycroZineGeneratorShape.PRIMARY_COLOR : '#333',
|
||
color: msg.role === 'user' ? '#000' : '#fff',
|
||
fontSize: '13px',
|
||
lineHeight: '1.4',
|
||
whiteSpace: 'pre-wrap',
|
||
}}
|
||
>
|
||
{msg.content}
|
||
</div>
|
||
))}
|
||
<div ref={messagesEndRef} />
|
||
</div>
|
||
|
||
{/* Input area */}
|
||
<div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
|
||
<input
|
||
type="text"
|
||
value={inputValue}
|
||
onChange={(e) => setInputValue(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
e.stopPropagation()
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault()
|
||
handleSendMessage()
|
||
}
|
||
}}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
placeholder={shape.props.topic ? "Add details or feedback..." : "Enter your zine topic..."}
|
||
style={inputStyle}
|
||
/>
|
||
<button
|
||
onClick={handleSendMessage}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={buttonStyle}
|
||
disabled={!inputValue.trim()}
|
||
>
|
||
Send
|
||
</button>
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
|
||
{!shape.props.contentOutline && shape.props.topic && (
|
||
<button
|
||
onClick={generateOutline}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, flex: 1, backgroundColor: '#333' }}
|
||
disabled={shape.props.isLoading}
|
||
>
|
||
Generate Outline
|
||
</button>
|
||
)}
|
||
{shape.props.contentOutline && (
|
||
<button
|
||
onClick={generateDrafts}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, flex: 1 }}
|
||
disabled={shape.props.isLoading}
|
||
>
|
||
{shape.props.isLoading ? 'Generating...' : 'Generate 8 Draft Pages →'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
// ========== DRAFTS PHASE ==========
|
||
const renderDraftsPhase = () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '16px' }}>
|
||
<div style={{ fontSize: '48px' }}>🍄</div>
|
||
<div style={{ fontSize: '18px', fontWeight: 'bold', color: '#fff' }}>Generating Drafts...</div>
|
||
|
||
{/* Progress bar */}
|
||
<div style={{ width: '80%', backgroundColor: '#333', borderRadius: '4px', overflow: 'hidden' }}>
|
||
<div style={{
|
||
width: `${(shape.props.currentGeneratingPage / 8) * 100}%`,
|
||
height: '8px',
|
||
backgroundColor: MycroZineGeneratorShape.PRIMARY_COLOR,
|
||
transition: 'width 0.3s ease',
|
||
}} />
|
||
</div>
|
||
|
||
<div style={{ color: '#999', fontSize: '14px' }}>
|
||
Page {shape.props.currentGeneratingPage}/8
|
||
</div>
|
||
|
||
{/* Page status list */}
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
|
||
{Array.from({ length: 8 }, (_, i) => i + 1).map(pageNum => {
|
||
const isComplete = shape.props.draftPages.some(p => p.pageNumber === pageNum)
|
||
const isGenerating = shape.props.currentGeneratingPage === pageNum
|
||
return (
|
||
<div
|
||
key={pageNum}
|
||
style={{
|
||
width: '32px',
|
||
height: '32px',
|
||
borderRadius: '4px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '12px',
|
||
fontWeight: 'bold',
|
||
backgroundColor: isComplete ? MycroZineGeneratorShape.PRIMARY_COLOR : isGenerating ? '#555' : '#333',
|
||
color: isComplete ? '#000' : '#fff',
|
||
border: isGenerating ? `2px solid ${MycroZineGeneratorShape.PRIMARY_COLOR}` : 'none',
|
||
}}
|
||
>
|
||
{isComplete ? '✓' : pageNum}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
// ========== FEEDBACK PHASE ==========
|
||
const renderFeedbackPhase = () => {
|
||
const [selectedPage, setSelectedPage] = useState<number | null>(null)
|
||
const [feedbackInput, setFeedbackInput] = useState('')
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '12px' }}>
|
||
<div style={{ color: '#999', fontSize: '13px', textAlign: 'center' }}>
|
||
Review your drafts. Approve pages or add feedback for revision.
|
||
</div>
|
||
|
||
{/* Page grid */}
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||
gap: '8px',
|
||
overflow: 'auto',
|
||
padding: '4px',
|
||
}}>
|
||
{shape.props.draftPages.map((page) => {
|
||
const feedback = shape.props.pageFeedback.find(f => f.pageNumber === page.pageNumber)
|
||
const isApproved = feedback?.approved
|
||
const hasFeedback = feedback?.feedbackText
|
||
|
||
return (
|
||
<div
|
||
key={page.pageNumber}
|
||
onClick={() => setSelectedPage(page.pageNumber)}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{
|
||
position: 'relative',
|
||
borderRadius: '4px',
|
||
overflow: 'hidden',
|
||
cursor: 'pointer',
|
||
border: selectedPage === page.pageNumber
|
||
? `2px solid ${MycroZineGeneratorShape.PRIMARY_COLOR}`
|
||
: isApproved
|
||
? '2px solid #4ade80'
|
||
: hasFeedback
|
||
? '2px solid #fbbf24'
|
||
: '2px solid #333',
|
||
}}
|
||
>
|
||
<img
|
||
src={page.imageUrl}
|
||
alt={`Page ${page.pageNumber}`}
|
||
style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover' }}
|
||
/>
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
padding: '4px',
|
||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||
fontSize: '10px',
|
||
color: '#fff',
|
||
textAlign: 'center',
|
||
}}>
|
||
{page.pageNumber} {isApproved ? '✓' : hasFeedback ? '✎' : ''}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Selected page actions */}
|
||
{selectedPage && (
|
||
<div style={{
|
||
padding: '12px',
|
||
backgroundColor: '#1a1a1a',
|
||
borderRadius: '6px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
}}>
|
||
<div style={{ fontSize: '13px', color: '#fff' }}>Page {selectedPage}</div>
|
||
<div style={{ display: 'flex', gap: '8px' }}>
|
||
<button
|
||
onClick={() => {
|
||
approvePage(selectedPage)
|
||
setSelectedPage(null)
|
||
}}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, flex: 1, backgroundColor: '#4ade80', color: '#000' }}
|
||
>
|
||
✓ Approve
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
// Toggle feedback input
|
||
}}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, flex: 1, backgroundColor: '#fbbf24', color: '#000' }}
|
||
>
|
||
✎ Add Feedback
|
||
</button>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
value={feedbackInput}
|
||
onChange={(e) => setFeedbackInput(e.target.value)}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
placeholder="Describe changes needed..."
|
||
style={inputStyle}
|
||
/>
|
||
{feedbackInput && (
|
||
<button
|
||
onClick={() => {
|
||
addPageFeedback(selectedPage, feedbackInput)
|
||
setFeedbackInput('')
|
||
setSelectedPage(null)
|
||
}}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={buttonStyle}
|
||
>
|
||
Save Feedback
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Continue button */}
|
||
<button
|
||
onClick={startFinalization}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{
|
||
...buttonStyle,
|
||
opacity: allPagesReviewed ? 1 : 0.5,
|
||
}}
|
||
disabled={!allPagesReviewed}
|
||
>
|
||
{shape.props.pageFeedback.some(f => !f.approved && f.feedbackText)
|
||
? 'Apply Feedback & Finalize →'
|
||
: 'Finalize Zine →'}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ========== FINALIZING PHASE ==========
|
||
const renderFinalizingPhase = () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '16px' }}>
|
||
<div style={{ fontSize: '48px' }}>🔄</div>
|
||
<div style={{ fontSize: '18px', fontWeight: 'bold', color: '#fff' }}>Applying Feedback...</div>
|
||
|
||
<div style={{ color: '#999', fontSize: '14px' }}>
|
||
Regenerating {shape.props.pageFeedback.filter(f => !f.approved && f.feedbackText).length} pages
|
||
</div>
|
||
|
||
{shape.props.currentGeneratingPage > 0 && (
|
||
<div style={{ color: MycroZineGeneratorShape.PRIMARY_COLOR, fontSize: '14px' }}>
|
||
Currently updating page {shape.props.currentGeneratingPage}...
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
|
||
// ========== COMPLETE PHASE ==========
|
||
const renderCompletePhase = () => {
|
||
const pages = shape.props.finalPages.length > 0 ? shape.props.finalPages : shape.props.draftPages
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '12px' }}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '4px' }}>🍄</div>
|
||
<div style={{ fontSize: '16px', fontWeight: 'bold', color: MycroZineGeneratorShape.PRIMARY_COLOR }}>
|
||
Zine Complete!
|
||
</div>
|
||
<div style={{ color: '#999', fontSize: '13px' }}>
|
||
"{shape.props.title || shape.props.topic}"
|
||
</div>
|
||
</div>
|
||
|
||
{/* Print preview - 2x4 grid */}
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||
gridTemplateRows: 'repeat(2, 1fr)',
|
||
gap: '2px',
|
||
backgroundColor: '#fff',
|
||
padding: '4px',
|
||
borderRadius: '4px',
|
||
}}>
|
||
{pages.map((page) => (
|
||
<img
|
||
key={page.pageNumber}
|
||
src={page.imageUrl}
|
||
alt={`Page ${page.pageNumber}`}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||
<button
|
||
onClick={generatePrintLayout}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={buttonStyle}
|
||
disabled={shape.props.isLoading}
|
||
>
|
||
📥 Download Print-Ready PNG
|
||
</button>
|
||
<button
|
||
onClick={saveAsTemplate}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, backgroundColor: '#333' }}
|
||
>
|
||
💾 Save as Template
|
||
</button>
|
||
<button
|
||
onClick={() => updateProps({
|
||
phase: 'ideation',
|
||
topic: '',
|
||
title: '',
|
||
contentOutline: null,
|
||
ideationMessages: [],
|
||
draftPages: [],
|
||
pageFeedback: [],
|
||
finalPages: [],
|
||
printLayoutUrl: null,
|
||
zineId: `zine_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||
})}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ ...buttonStyle, backgroundColor: '#1a1a1a', color: '#999' }}
|
||
>
|
||
🔄 Start New Zine
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Phase indicator
|
||
const phaseLabels: Record<ZinePhase, string> = {
|
||
ideation: '1. Ideation',
|
||
drafts: '2. Drafts',
|
||
feedback: '3. Feedback',
|
||
finalizing: '4. Finalizing',
|
||
complete: '5. Complete',
|
||
}
|
||
|
||
return (
|
||
<HTMLContainer id={shape.id}>
|
||
<StandardizedToolWrapper
|
||
title="🍄 MycroZine Generator"
|
||
primaryColor={MycroZineGeneratorShape.PRIMARY_COLOR}
|
||
isSelected={isSelected}
|
||
width={shape.props.w}
|
||
height={shape.props.h}
|
||
onClose={handleClose}
|
||
onMinimize={handleMinimize}
|
||
isMinimized={isMinimized}
|
||
onMaximize={toggleMaximize}
|
||
isMaximized={isMaximized}
|
||
editor={editor}
|
||
shapeId={shape.id}
|
||
tags={shape.props.tags || []}
|
||
onTagsChange={handleTagsChange}
|
||
tagsEditable={true}
|
||
isPinnedToView={shape.props.pinnedToView}
|
||
onPinToggle={handlePinToggle}
|
||
headerContent={
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
🍄 MycroZine
|
||
<span style={{
|
||
fontSize: '10px',
|
||
backgroundColor: MycroZineGeneratorShape.SECONDARY_COLOR,
|
||
padding: '2px 6px',
|
||
borderRadius: '10px',
|
||
color: MycroZineGeneratorShape.PRIMARY_COLOR,
|
||
}}>
|
||
{phaseLabels[shape.props.phase]}
|
||
</span>
|
||
</span>
|
||
}
|
||
>
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
padding: '12px',
|
||
backgroundColor: '#0a0a0a',
|
||
color: '#fff',
|
||
overflow: 'hidden',
|
||
}}>
|
||
{/* Error display */}
|
||
{shape.props.error && (
|
||
<div style={{
|
||
padding: '8px 12px',
|
||
backgroundColor: '#331111',
|
||
border: '1px solid #663333',
|
||
borderRadius: '6px',
|
||
color: '#ff6666',
|
||
fontSize: '12px',
|
||
marginBottom: '12px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}>
|
||
<span>{shape.props.error}</span>
|
||
<button
|
||
onClick={() => updateProps({ error: null })}
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
style={{ background: 'none', border: 'none', color: '#ff6666', cursor: 'pointer' }}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{renderPhaseContent()}
|
||
</div>
|
||
</StandardizedToolWrapper>
|
||
</HTMLContainer>
|
||
)
|
||
}
|
||
|
||
override indicator(shape: IMycroZineGenerator) {
|
||
return (
|
||
<rect
|
||
width={shape.props.w}
|
||
height={shape.props.h}
|
||
rx={6}
|
||
/>
|
||
)
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// Helper Functions
|
||
// ============================================================================
|
||
|
||
// Spawn page images on the canvas in a 4x2 grid
|
||
async function spawnPageOnCanvas(
|
||
editor: any,
|
||
imageUrl: string,
|
||
index: number,
|
||
parentShape: IMycroZineGenerator
|
||
): Promise<string | undefined> {
|
||
try {
|
||
// Calculate position in a 4x2 grid to the right of the generator
|
||
const col = index % 4
|
||
const row = Math.floor(index / 4)
|
||
const spacing = 20
|
||
const pageWidth = 200
|
||
const pageHeight = 300
|
||
|
||
const x = parentShape.props.w + 50 + col * (pageWidth + spacing)
|
||
const y = row * (pageHeight + spacing)
|
||
|
||
// Get parent shape position
|
||
const parentBounds = editor.getShapePageBounds(parentShape.id)
|
||
if (!parentBounds) return undefined
|
||
|
||
const shapeId = createShapeId()
|
||
|
||
// Create an image shape on the canvas
|
||
editor.createShape({
|
||
id: shapeId,
|
||
type: 'image',
|
||
x: parentBounds.x + x,
|
||
y: parentBounds.y + y,
|
||
props: {
|
||
w: pageWidth,
|
||
h: pageHeight,
|
||
url: imageUrl,
|
||
},
|
||
})
|
||
|
||
return shapeId
|
||
} catch (err) {
|
||
console.error('Failed to spawn page on canvas:', err)
|
||
return undefined
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// Styles
|
||
// ============================================================================
|
||
|
||
const inputStyle: React.CSSProperties = {
|
||
flex: 1,
|
||
padding: '10px 12px',
|
||
backgroundColor: '#1a1a1a',
|
||
border: '1px solid #333',
|
||
borderRadius: '6px',
|
||
color: '#fff',
|
||
fontSize: '13px',
|
||
outline: 'none',
|
||
}
|
||
|
||
const buttonStyle: React.CSSProperties = {
|
||
padding: '10px 16px',
|
||
backgroundColor: '#00ff00',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
color: '#000',
|
||
fontSize: '13px',
|
||
fontWeight: 'bold',
|
||
cursor: 'pointer',
|
||
transition: 'opacity 0.15s',
|
||
}
|
||
|
||
const selectStyle: React.CSSProperties = {
|
||
flex: 1,
|
||
padding: '8px 12px',
|
||
backgroundColor: '#1a1a1a',
|
||
border: '1px solid #333',
|
||
borderRadius: '6px',
|
||
color: '#fff',
|
||
fontSize: '12px',
|
||
cursor: 'pointer',
|
||
}
|