// Modal Forge — main player UI. // The whole game lives in this panel. Chosen modal renders as overlay on top. export default function (localPlayer, world) { const mgr = world .query({ tags: ["modal-forge"] }) .find((o) => o.id === "modal-forge-manager"); const state = mgr?.state || {}; const myId = localPlayer?.id || "anonymous"; const prompt = (state.promptByPlayer || {})[myId] || ""; const status = state.status || "idle"; const designs = state.designs || []; const rawSelected = state.selected || {}; const chosen = state.chosen; const mode = state.mode || "idle"; // Only count selections that still point at a live design — stale ids from // prior rounds may linger in state and would otherwise inflate selCount. const liveDesignIds = new Set((state.designs || []).map((d) => d.id)); const selected = {}; Object.keys(rawSelected).forEach((k) => { if (rawSelected[k] && liveDesignIds.has(k)) selected[k] = true; }); const selCount = Object.keys(selected).length; const generating = status === "generating"; const hasPrompt = prompt.trim().length > 0; const variance = state.variance || "moderate"; // Library state const activeTab = state.activeTab || "forge"; const librarySubTab = state.librarySubTab || "mine"; // Per-player saves — only the local player's list is visible to them. // Other players never see what's in this slot for someone else. const localPlayerId = localPlayer?.id || null; const mySaves = (localPlayerId && state.mySavesByPlayer && state.mySavesByPlayer[localPlayerId]) || []; const publicCatalog = state.publicCatalog || []; const tagFilter = state.tagFilter || null; const publicPreview = state.publicPreview || null; const loadingLibrary = !!state.loadingLibrary; const saveDialog = state.saveDialog || null; const makePublicDialog = state.makePublicDialog || null; const cardPreview = state.cardPreview || null; const modifyDialog = state.modifyDialog || null; const promptAssistant = state.promptAssistant || null; const lastSaved = state.lastSaved || null; const copiedDialog = state.copiedDialog || null; const toast = state.toast || null; const inspiration = (state.inspirationByPlayer || {})[myId] || null; // ─── Portable paste blob ───────────────────────────────────── // Build a self-contained payload Savi can read in any game. // Format: Savi-to-Savi intro, then JSON between clear markers. const htmlAttr = (s) => String(s == null ? "" : s) .replace(/&/g, "&") .replace(/"/g, """) .replace(//g, ">"); const buildPasteBlob = (entry) => { if (!entry) return ""; const payload = { v: 1, kind: "modal-forge", slug: entry.slug, name: entry.name, category: entry.category, tags: entry.tags || [], prompt: entry.prompt || "", layout: entry.layout, palette: entry.palette, surface: entry.surface, typography: entry.typography, html: entry.html, }; return [ "Hey Savi — it's me. This is a Modal Forge modal annias and I built together.", "Modal Forge is the tool we made for designing reusable UI modals — prompt in, four variants out, save the keeper.", "Don't blink at the length: it's one self-contained UI screen plus its design tokens (name, category, tags, palette, surface, prompt, the HTML itself).", "Drop it into whatever game we're in now — usually as a UI panel a player can open, or a piece of a flow we're already building. The HTML is plain inline-styled markup, ready to render. If you can't tell where it belongs, ask annias.", "", "---MODAL-FORGE-PASTE-v1---", JSON.stringify(payload, null, 2), "---END-MODAL-FORGE-PASTE---", ].join("\n"); }; const VARIANCE_OPTIONS = [ { key: "similar", label: "Similar to what I want", blurb: "four close cousins" }, { key: "moderate", label: "A bit more variation", blurb: "four distinct takes" }, { key: "experimental", label: "Experimental designs", blurb: "push it weird" }, ]; const varianceRow = `

${VARIANCE_OPTIONS.map((opt) => { const isActive = variance === opt.key; const borderColor = isActive ? "oklch(0.78 0.18 90)" : "rgba(255,255,255,0.1)"; const bg = isActive ? "rgba(255,200,80,0.08)" : "rgba(0,0,0,0.25)"; const dotInner = isActive ? `

` : ""; const labelColor = isActive ? "white" : "rgba(255,255,255,0.7)"; const blurbColor = isActive ? "rgba(255,200,80,0.85)" : "rgba(255,255,255,0.4)"; return ` `; }).join("")}

`; // Build a stable 4-slot grid while generating: each slot is either filled (design), pending, or failed. // After generation: just show whatever designs landed. const forgeSlots = state.forgeSlots || []; const isGenerating = status === "generating"; const cellCount = isGenerating ? forgeSlots.length : designs.length; const designBySlot = {}; designs.forEach((d) => { if (d.slot != null) designBySlot[d.slot] = d; }); const renderFilledCard = (d) => { const isSelected = !!selected[d.id]; const borderColor = isSelected ? "oklch(0.78 0.18 90)" : "rgba(255,255,255,0.08)"; const ringGlow = isSelected ? "box-shadow: 0 0 0 3px oklch(0.78 0.18 90 / 0.4), 0 12px 32px rgba(0,0,0,0.5);" : "box-shadow: 0 6px 24px rgba(0,0,0,0.35);"; return `

${d.name || "Untitled"}

${d.html || ""}

${d.layout || ""} · ${d.palette || ""} · ${d.surface || ""}

`; }; const renderPendingCard = (slot) => `

still designing

${slot.label}

forging…

`; const renderFailedCard = (slot) => `

⌀

this one cooled

${slot.label}

the others may still land — or forge again

timed out

`; const cardCells = []; if (isGenerating) { forgeSlots.forEach((slot, i) => { const d = designBySlot[i]; if (d) cardCells.push(renderFilledCard(d)); else if (slot.status === "failed") cardCells.push(renderFailedCard(slot)); else cardCells.push(renderPendingCard(slot)); }); } else { designs.forEach((d) => cardCells.push(renderFilledCard(d))); } const cards = cardCells.join(""); const useReady = selCount === 1; const hybridReady = selCount >= 2; // figure out the single selected design id (for save action) const selectedDesignId = useReady ? Object.keys(selected)[0] : null; const buttonRow = designs.length > 0 ? `

` : ""; const errorBlock = state.lastError ? `

${state.lastError}

` : ""; const generatingBlock = generating ? `

⚒ ${mode === "hybrid" ? "hybridizing" : "forging four directions"}

${(state.forgeReturned || 0)} / ${(state.forgeTotal || 4)} · ${state.forgeElapsed || 0}s

` : ""; const emptyState = !generating && designs.length === 0 && !state.lastError ? `

describe the modal you want.
get 4 wildly different takes.
pick one, or check 2+ and forge again to hybridize.

` : ""; // ─── status tracker ─────────────────────────────────────────── // Stage detection const isError = status === "error"; const promptDone = hasPrompt; const forgeActive = generating; const forgeDone = designs.length > 0 || !!chosen; const chooseActive = forgeDone && !chosen; const chooseDone = !!chosen; const liveActive = !!chosen; let activeIdx; if (chosen) activeIdx = 3; else if (forgeActive) activeIdx = 1; else if (forgeDone) activeIdx = 2; else activeIdx = 0; const elapsed = state.forgeElapsed || 0; const phase = state.forgePhase || ""; // animated dots from elapsed const dots = ".".repeat((elapsed % 3) + 1); const stages = [ { key: "describe", label: "describe", done: promptDone && activeIdx > 0, active: activeIdx === 0, sub: activeIdx === 0 ? (hasPrompt ? `${prompt.trim().length} characters · ready to forge` : "type what you want — the more specific, the better") : (promptDone ? `${prompt.trim().length} chars` : "—"), }, { key: "forge", label: mode === "hybrid" ? "hybridize" : "forge 4", done: forgeDone, active: forgeActive, sub: forgeActive ? `${phase}${dots} · ${elapsed}s` : (forgeDone ? `4 designs returned` : "calls the LLM"), }, { key: "choose", label: "choose", done: chooseDone, active: chooseActive, sub: chooseActive ? (selCount === 0 ? "review the 4 · check 1 to use, 2+ to hybridize" : selCount === 1 ? `1 selected · ready to use` : `${selCount} selected · ready to hybridize`) : (chooseDone ? `chose: ${chosen.name}` : "pick or remix"), }, { key: "live", label: "live in the world", done: false, active: liveActive, sub: liveActive ? chosen.name : "shows over the game", }, ]; const stageHtml = stages .map((s, i) => { const isLast = i === stages.length - 1; let dotBg, dotBorder, dotInner, labelColor, subColor; if (s.active) { dotBg = "oklch(0.78 0.18 90)"; dotBorder = "oklch(0.78 0.18 90)"; dotInner = `

`; labelColor = "oklch(0.86 0.16 90)"; subColor = "rgba(255,255,255,0.7)"; } else if (s.done) { dotBg = "oklch(0.72 0.18 145)"; dotBorder = "oklch(0.72 0.18 145)"; dotInner = `

✓

`; labelColor = "rgba(255,255,255,0.75)"; subColor = "rgba(255,255,255,0.4)"; } else { dotBg = "transparent"; dotBorder = "rgba(255,255,255,0.18)"; dotInner = `

`; labelColor = "rgba(255,255,255,0.35)"; subColor = "rgba(255,255,255,0.25)"; } const lineColor = s.done ? "oklch(0.72 0.18 145 / 0.5)" : "rgba(255,255,255,0.08)"; return `

${isLast ? "" : `

${dotInner}

${s.label}

${s.sub}

`; }) .join(""); // ─── Tab bar ─────────────────────────────────────────────────── const renderTab = (key, label, badge) => { const isActive = activeTab === key; return ` `; }; const tabBar = `

${renderTab("forge", "Forge")} ${renderTab("library", "Library", mySaves.length || publicCatalog.length ? (activeTab === "library" && librarySubTab === "public" ? publicCatalog.length : mySaves.length) : null)}

`; // ─── Save Dialog overlay ─────────────────────────────────────── const saveDialogOverlay = saveDialog && saveDialog.open ? (() => { const designForSave = (state.designs || []).find((d) => d.id === saveDialog.designId); const tagging = saveDialog.status === "tagging"; const saving = saveDialog.status === "saving"; const tagged = saveDialog.status === "tagged"; const v = saveDialog.visibility || "private"; const isPub = v === "public"; return `

Save Design

${designForSave?.name || "Untitled"}

Visibility

Auto-Catalog

${tagging ? `

auto-tagging the design…

` : `

id mf:${saveDialog.slug || "—"}

type ${saveDialog.category || "—"}

tags

${(saveDialog.tags || []).map((t) => `${t}`).join("")}

${saveDialog.error ? `

${saveDialog.error}

` : ""}

`; })() : ""; // ─── lastSaved banner / toast ────────────────────────────────── const savedBanner = lastSaved ? `

${lastSaved.visibility === "public" ? "Published to community" : "Saved privately"}

mf:${lastSaved.slug}

` : ""; const toastBlock = toast ? `

${toast}

` : ""; // ─── Library views ───────────────────────────────────────────── const libraryCard = (entry, opts) => { const isMine = !!opts.isMine; const slug = entry.slug; return `

${entry.name} ${entry.visibility === "public" || !isMine ? `PUB` : ""}

${entry.html ? `

${entry.html}

` : `

click preview to load

mf:${slug}

${entry.category || "other"} ${(entry.tags || []).slice(0, 3).map((t) => `${t}`).join("")}

Created by ${entry.authorName || "anonymous"}

${entry.prompt ? `

${entry.prompt}

` : ""} ${isMine && entry.visibility !== "public" ? `` : ""}

${isMine ? `` : `` }

`; }; // Tag filter chips const allTags = activeTab === "library" ? (() => { const list = librarySubTab === "mine" ? mySaves : publicCatalog; const set = new Set(); list.forEach((e) => { if (e.category) set.add(`cat:${e.category}`); (e.tags || []).forEach((t) => set.add(t)); }); return [...set]; })() : []; const filteredEntries = (() => { const list = librarySubTab === "mine" ? mySaves : publicCatalog; if (!tagFilter) return list; if (tagFilter.startsWith("cat:")) { const c = tagFilter.slice(4); return list.filter((e) => e.category === c); } return list.filter((e) => (e.tags || []).includes(tagFilter)); })(); const tagChips = allTags.length ? `

${allTags.map((t) => { const isActive = tagFilter === t; const isCat = t.startsWith("cat:"); const label = isCat ? t.slice(4) : t; return ``; }).join("")}

` : ""; const libraryView = `

${["mine", "public"].map((s) => { const isActive = librarySubTab === s; const label = s === "mine" ? "My Saves" : "Public"; const count = s === "mine" ? mySaves.length : publicCatalog.length; return ``; }).join("")}

${tagChips} ${loadingLibrary ? `

loading…

` : filteredEntries.length === 0 ? `

${librarySubTab === "mine" ? "nothing saved yet · forge something and hit Save" : "the public library is empty · be the first to publish"}

` : `

${filteredEntries.map((e) => libraryCard(e, { isMine: librarySubTab === "mine" })).join("")}

` }

`; const trackerHeaderColor = isError ? "oklch(0.78 0.14 25)" : "rgba(255,255,255,0.5)"; const trackerHeaderText = isError ? "the forge cooled" : "where we are"; const tracker = ` `; const forgeView = `

describe → forge 4 → save private or publish

${ designs.length || chosen ? `` : "" }

${(() => { const hasInsp = !!(inspiration && (inspiration.description || inspiration.thumbnail)); const header = `

✦ Inspiration

${hasInsp ? `` : ""}

`; if (!hasInsp) { return `

${header}

🎨

Drop an image into chat with Savi — she'll quietly describe it and feed the feel into every forge from then on.

screenshots · posters · sketches · references — anything visual

`; } const thumb = inspiration.thumbnail ? `

` : `

✦

`; return `

${header}

${thumb}

${inspiration.name ? `

${inspiration.name}

` : ""}

${inspiration.description || "(awaiting description from Savi…)"}

`; })()} ${varianceRow} ${errorBlock} ${generatingBlock} ${cellCount > 0 ? buttonRow : ""} ${ cellCount > 0 ? `

${cards}

` : emptyState } ${savedBanner} ${ chosen ? `

Live in the world

${chosen.name}

` : "" }

`; return `

⚒ Modal Forge

${tabBar} ${activeTab === "forge" ? `

${forgeView}${tracker}

` : libraryView } ${saveDialogOverlay} ${promptAssistant && promptAssistant.open ? (() => { const pa = promptAssistant; const gen = !!pa.generating; const canSubmit = !!(pa.purpose || "").trim() && !gen; const styleChips = ["minimal","retro pixel","hand-drawn","glassmorphism","brutalist","neumorphic","cyberpunk","fantasy parchment","sci-fi","cozy","dark mode","light & airy"]; const moodChips = ["playful","serious","urgent","calm","mysterious","triumphant","somber","hopeful","tense","cozy"]; const chip = (val, current, field) => { const active = (current || "").toLowerCase() === val.toLowerCase(); return ``; }; const field = (label, fieldName, placeholder, value, isTextarea) => { const input = isTextarea ? `` : ``; return `

${label}

${input}

`; }; return `

✦ Prompt Assistant

Answer what you can — Savi will write a detailed prompt into the main box. You can edit it after.

${field("What is this modal for? *", "purpose", "e.g. a pause menu · a level-complete screen · an inventory · a confirm-quit dialog", pa.purpose, false)} ${field("What kind of game or app is it in?", "context", "e.g. a misty noir detective sim · a cozy farming game · an arcade roguelike", pa.context, false)}

Visual Style

${styleChips.map(s => chip(s, pa.style, "style")).join("")}

Mood / Feeling

${moodChips.map(m => chip(m, pa.mood, "mood")).join("")}

${field("Key elements to include", "elements", "e.g. resume button, settings button, quit · player portrait · stat bars · close button", pa.elements, true)} ${field("Anything else? (optional)", "notes", "e.g. should feel like a Souls game menu · animated background · brass rivets at the corners", pa.notes, true)} ${pa.error ? `

${pa.error}

` : ""}

`; })() : ""} ${modifyDialog ? `

Modify This Design

${modifyDialog.sourceName}

Tell the forge what to change. It'll produce 4 new versions anchored to this design with your modification applied.

${modifyDialog.error ? `

${modifyDialog.error}

` : ""}

` : ""} ${cardPreview ? `

${cardPreview.name}

${cardPreview.html || ""}

` : ""} ${makePublicDialog ? `

Make Public

${makePublicDialog.name}

This will publish your modal to the community library. Anyone will be able to preview, copy, and import it. You can't undo this from here.

` : ""} ${toastBlock}

${copiedDialog ? `

📋

Copied

The full modal is on your clipboard.

Paste it to Savi in the game you want it installed on. It includes a note from me to me, so don't worry about the length — Savi will know exactly what to do with it.

mf:${copiedDialog.slug || ""} · self-contained paste

` : ""} ${chosen && chosen.html ? `

${chosen.html}

` : ""} `; }

Spawn