import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("procedural-workshop") const { doc: newConstraint, merge: mergeConstraint, submit: submitConstraint } = useDocument({ type: "constraint", name: "", spec: "", createdAt: Date.now() }) const { docs: constraints } = useLiveQuery("type", { key: "constraint", descending: true }) const [suggestingConstraint, setSuggestingConstraint] = React.useState(false) const [selectedConstraintId, setSelectedConstraintId] = React.useState("") const [seed, setSeed] = React.useState("") const [generating, setGenerating] = React.useState(false) const { docs: pieces } = useLiveQuery("type", { key: "piece", descending: true }) async function suggestConstraint() { setSuggestingConstraint(true) try { const r = await callAI("Invent one fresh procedural writing constraint in the Oulipo tradition. Be specific and rule-based.", { schema: { properties: { name: { type: "string" }, spec: { type: "string" } } } }) const d = JSON.parse(r) mergeConstraint({ name: d.name, spec: d.spec }) } finally { setSuggestingConstraint(false) } } async function generatePiece() { const constraint = constraints.find(c => c._id === selectedConstraintId) if (!constraint) return setGenerating(true) try { const r = await callAI(`Compose a short passage obeying this constraint precisely. Constraint name: ${constraint.name}. Specification: ${constraint.spec}. Seed: ${seed || "(none)"}.`, { schema: { properties: { passage: { type: "string", description: "The generated text that obeys the constraint." }, annotation: { type: "string", description: "Brief explanation of how each sentence satisfies the rule." }, tradition: { type: "string", description: "Critical note placing the piece within Oulipo, Language Poetry, or contemporary generative literature." } } } }) const d = JSON.parse(r) await database.put({ type: "piece", constraintId: constraint._id, constraintName: constraint.name, seed, passage: d.passage, annotation: d.annotation, tradition: d.tradition, createdAt: Date.now(), authorSlug: "visitor", authorName: "visitor", authorAvatar: "" }) setSeed("") } finally { setGenerating(false) } } const spinner = const c = { page: "min-h-screen bg-[#f4ead5] text-[#2a1f14] font-serif pb-24", header: "bg-[#2a1f14] text-[#f4ead5] px-6 py-8 border-b-4 border-[#c9622f]", title: "text-4xl md:text-5xl tracking-tight", tagline: "text-sm italic mt-2 text-[#e8d9b8]", main: "max-w-3xl mx-auto px-4 md:px-6 py-6 space-y-6", section: "bg-[#fbf5e6] border border-[#2a1f14]/15 rounded-sm shadow-sm p-5", h2: "text-2xl border-b border-[#c9622f] pb-2 mb-4 tracking-wide", label: "block text-sm uppercase tracking-widest text-[#6b513a] mb-1", input: "w-full bg-[#f4ead5] border border-[#2a1f14]/30 rounded-sm px-3 py-3 min-h-[44px] text-[#2a1f14] focus:outline-none focus:border-[#c9622f]", textarea: "w-full bg-[#f4ead5] border border-[#2a1f14]/30 rounded-sm px-3 py-3 text-[#2a1f14] focus:outline-none focus:border-[#c9622f]", btn: "min-h-[44px] px-4 py-3 bg-[#c9622f] text-[#f4ead5] rounded-sm uppercase tracking-widest text-sm hover:bg-[#a44d22] disabled:opacity-50 inline-flex items-center gap-2", btnGhost: "min-h-[44px] px-3 py-2 border border-[#2a1f14]/30 text-[#2a1f14] rounded-sm text-sm hover:bg-[#f4ead5]", row: "border border-[#2a1f14]/10 bg-[#f4ead5] rounded-sm p-3", muted: "text-sm text-[#6b513a]", suggest: "text-xs underline text-[#c9622f] hover:text-[#a44d22]", pill: "inline-block text-xs uppercase tracking-widest bg-[#2a1f14] text-[#f4ead5] px-2 py-1 rounded-sm", } return (

Constraint Library

Name mergeConstraint({ name: e.target.value })} placeholder="e.g. Lipogram in E" />

Specification

mergeConstraint({ spec: e.target.value })} placeholder="Describe the rule precisely — what must hold for every sentence, word, or line." />
              </div>
              <div className="flex items-center gap-3 flex-wrap">
                <button type="submit" className={c.btn} disabled={!newConstraint.name || !newConstraint.spec}>Save Constraint</button>
                <button type="button" className={c.suggest} onClick={suggestConstraint} disabled={suggestingConstraint}>
                  {suggestingConstraint ? "Inventing…" : "Suggest a constraint"}
                </button>
              </div>
            </form>
          <ul className="mt-5 space-y-2">
            {constraints.length === 0 && <li className={c.muted}>No constraints yet. Define the first procedure.</li>}
            {constraints.map(k => (
              <li key={k._id} className={c.row}>
                <strong>{k.name}</strong>
                <div className={c.muted}>{k.spec}</div>
              </li>
            ))}
          </ul>
        </section>
        <section id="generator" className={c.section}>
          <h2 className={c.h2}>Constrained Generator</h2>
          <div className="space-y-3">
              <div>
                <label className={c.label}>Choose Constraint</label>
                <select className={c.input} value={selectedConstraintId} onChange={e => setSelectedConstraintId(e.target.value)}>
                  <option value="">— select a procedure —</option>
                  {constraints.map(k => <option key={k._id} value={k._id}>{k.name}</option>)}
                </select>
              </div>
              <div>
                <label className={c.label}>Seed phrase (optional)</label>
                <input className={c.input} value={seed} onChange={e => setSeed(e.target.value)} placeholder="A word, phrase, or fragment to begin from." />
              </div>
              <div className="flex items-center gap-3">
                <button type="button" className={c.btn} disabled={!selectedConstraintId || generating} onClick={generatePiece}>
                  {generating ? <>{spinner} Composing…</> : "Generate Passage"}
                </button>
                {generating && <span className={c.muted}>The procedure runs…</span>}
              </div>
            </div>
        </section>
        <section id="archive" className={c.section}>
          <h2 className={c.h2}>Workshop Archive</h2>
          {pieces.length === 0 && <p className={c.muted}>No pieces yet. Compose under a constraint to populate the archive.</p>}
          <ul className="space-y-4">
            {pieces.map(p => (
              <li key={p._id} className={c.row}>
                <div className="flex items-center justify-between flex-wrap gap-2 mb-2">
                  <span className={c.pill}>{p.constraintName}</span>
                  {p.authorAvatar && (
                    <span className="flex items-center gap-2 text-xs text-[#6b513a]">
                      <img src={p.authorAvatar} alt={p.authorSlug} className="w-5 h-5 rounded-full" />
                      {p.authorName}
                    </span>
                  )}
                </div>
                {p.seed && <div className={c.muted}>seed: <em>{p.seed}</em></div>}
                <p className="mt-2 whitespace-pre-wrap leading-relaxed">{p.passage}</p>
                <details className="mt-3">
                  <summary className="cursor-pointer text-sm uppercase tracking-widest text-[#c9622f]">Annotation & tradition</summary>
                  <div className="mt-2 space-y-2 text-sm">
                    <p><strong>How it obeys:</strong> {p.annotation}</p>
                    <p><strong>Tradition:</strong> {p.tradition}</p>
                  </div>
                </details>
              </li>
            ))}
          </ul>
        </section>
      </main>
    </div>
  )
}</article></body></html>