Skip to content

Perchance Builder — a no-code drag-and-drop generator builder - #1

Draft
Equallogic wants to merge 13 commits into
mainfrom
claude/project-cleanup-archive-6flx2h
Draft

Perchance Builder — a no-code drag-and-drop generator builder#1
Equallogic wants to merge 13 commits into
mainfrom
claude/project-cleanup-archive-6flx2h

Conversation

@Equallogic

@Equallogic Equallogic commented Aug 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

What this is

A brand-new standalone product built in this workspace: a no-code, drag-and-drop builder for Perchance generators. You assemble a generator by dragging components onto a canvas and editing lists, watch it run in a live sandboxed preview, then export ready-to-paste Perchance source.

The first commit clears the previous gstack project (a full archive was captured first; history remains in git). Everything after is the new project.

MVP complete — all six build phases landed

Phase Delivered
P0 Scaffold Vite + React + TS + Tailwind SPA, three-pane shell
P1 Round trip Data model, engine, serializer — JSON → preview AND → valid Perchance source
P2 Drag-and-drop dnd-kit palette → canvas; sortable items and blocks; weights, inline lists, methods
P3 Interactivity References, variables, text inputs, dropdowns — live input→variable→output loop
P4 Depth Full method coverage, conditionals, object-lists with $output, raw-expr escape hatch
P5 Plugins Both families: text-to-image and ai-text plugin blocks with prompt editing
P6 Polish localStorage persistence, validation warnings, URL slug, downloads, guided export

Architecture

One canonical JSON model (GeneratorProject) is the single source of truth. Both the live-preview engine and the source serializer are pure functions of it — so there's no Perchance-text parser, and the riskiest question ("does exported code run when pasted into perchance.org?") was de-risked first, in isolation.

Builder UI ──► GeneratorProject JSON ──┬─► Engine     ──► live preview (sandboxed iframe)
                                       └─► Serializer ──► Perchance source (export)
  • Engine (src/engine) — deterministic tree-walk evaluator: seeded RNG, weighted picks, references, method chains, inline lists, expressions, object-list $output.
  • Serializer (src/serializer) — emits the two Perchance panels with strict 2-space indentation. Golden-file tested byte-for-byte.
  • Preview (src/preview) — engine output rendered into a sandbox="allow-scripts" iframe (no same-origin), bridged over postMessage with source-authenticated messages.
  • Builder (src/builder, src/store, src/catalog) — dnd-kit palette/canvas on a Zustand store, with an Inspector for block config.
  • Export (src/export) — validation, copyable source, downloads, guided handoff to perchance.org/editgen.

Research findings baked into the design

  • Perchance has no public authoring API; the DIY/perchance-api family is read-only (pulls output from published gens), so the finish path is export + guided handoff, with auto-publish deferred.
  • Live preview must run a local engine because Perchance iframe embedding only works for already-published generators.

Verification

  • 30 tests pass — engine (seeded determinism, weighting, methods, variables, object-lists, conditionals) + serializer (byte-exact golden files, methods, plugins) + validation.
  • Clean tsc typecheck and production build.
  • Driven in a headless browser: live preview renders and re-rolls; palette drag adds components; input→variable loop updates output live; AI Image export emits the import + call; project persists across reload.

Follow-ups (not in this MVP)

  • Builder UI affordances for object-lists and conditionals (capabilities exist and export; no dedicated palette editor yet).
  • Optional best-effort auto-publish (browser automation, user's own credentials) — deliberately deferred per the research.

🤖 Generated with Claude Code

claude added 4 commits August 5, 2026 03:21
@claude
Archive and clear gstack project to prepare for new standalone project
5387db1 
Removes the entire gstack working tree to start fresh. A full restorable
archive (including .git history) was captured before clearing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Scaffold Vite + React + TS + Tailwind SPA
4dc149a 
Project config, build tooling, and the static sandboxed preview iframe
document. Establishes the app shell foundation for the Perchance builder.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add data model, evaluation engine, and Perchance serializer
21c99bb 
The canonical GeneratorProject JSON model is the single source of truth.
The engine tree-walks it to produce live-preview output (seeded RNG,
weighted picks, references, method chains, inline lists, expressions);
the serializer emits the two Perchance panels with strict 2-space
indentation. Round trip is pinned by golden-file and seeded engine tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add builder UI, live preview bridge, and export panel
c4ba0ba 
Two-pane builder (editable lists with weights + output blocks) backed by a
Zustand store, a sandboxed-iframe live preview with re-roll wired over
postMessage, and an export panel with copyable Perchance source and a
guided handoff to perchance.org/editgen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@Equallogic Equallogic changed the title Archive and clear gstack to prepare for new standalone project Perchance Builder — a no-code drag-and-drop generator builder Aug 5, 2026
claude added 9 commits August 5, 2026 04:05
@claude
Add drag-and-drop builder: palette, sortable items and blocks
e4bdab0 
A component palette (dnd-kit) drops List/Output/Text/Button/Input/Dropdown
onto the canvas zones; list items and output blocks reorder by dragging.
Three-column layout: palette, canvas, live preview.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add tests for selection methods, inline lists, and weighted serializa…
843421e 
…tion

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Resolve bare references to variables when not a list
2f5d657 
[name] now falls back to variable scope (fed by inputs) when no list of
that name exists, mirroring Perchance. Enables the input -> variable ->
output live loop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add Inspector panel for configuring output blocks
ff2dfa9 
Select a block to edit its properties: outputRef list + DOM id, button
label + re-roll targets, input/select/checkbox variable bindings, select
options, and HTML tag.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Render object-lists via list $output template (this.* binding)
e0c07c2 
Selecting from a list with a $output template now binds the chosen item's
properties as this.* and renders the template (character-style generators).
Adds tests for object-lists, conditionals, and the raw-expression hatch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add AI image and text plugin components (both generator families)
ed3e57e 
New palette section adds text-to-image-plugin and ai-text-plugin blocks;
dropping one wires the import and a plugin call. The Inspector edits the
prompt; the preview shows a labeled placeholder shim (real plugins run on
Perchance after export). Serializer emits the import and call.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Add project validation (unresolved refs, empty lists, slug, dup names)
0b33d13 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Persist projects to localStorage; polish export panel
4cc471a 
Projects auto-save to localStorage and reload on return. The export panel
now shows validation warnings, a URL slug field, copy-both, and downloads
(.txt of both panels, plus a .json project save). Header gains a New action.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@claude
Pin Vercel framework to Vite for reliable detection
165da7c 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LcdEXhKZoXoBtd8pa5RsE3
@vercel

vercel Bot commented Aug 5, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gstack Ready Ready Preview Aug 5, 2026 5:13am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Equallogic @claude