[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68d4230cc6348191a16781a38c01ee2b","versionInt","title","Interactive Prompt Builder (clear Goal • Context • Format • Style • Detail)","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\n// Alternate Interactive Prompt Builder — 4‑Step Method\n// Fields: Role, Task, Context, Constraints\n// Keeps: uncontrolled inputs, stable typing, debounced preview, color toggle, presets, copy/download/reset, self‑tests\n\nexport default function App() {\n // --- Uncontrolled refs (no re-render while typing) ---\n const roleRef = useRef(null);\n const taskRef = useRef(null);\n const contextRef = useRef(null);\n const constraintsRef = useRef(null);\n\n // Preview area (switches between

 text and colored HTML)\n  const previewRef = useRef(null);\n\n  // Minimal state for UI controls\n  const [scenario, setScenario] = useState(\"none\");\n  const [compact, setCompact] = useState(false);\n  const [colorPreview, setColorPreview] = useState(false);\n  const [testStatus, setTestStatus] = useState(null);\n\n  const debounceTimer = useRef(null);\n\n  // --- Helpers ---\n  const setRefVal = (ref: React.MutableRefObject, val = \"\") => {\n    if (ref.current) ref.current.value = val;\n  };\n\n  const escapeHTML = (s: string) =>\n    (s || \"\")\n      .replace(/&/g, \"&\")\n      .replace(//g, \">\")\n      .replace(/\\\"/g, \""\")\n      .replace(/'/g, \"'\");\n\n  const buildPartsString = (parts: (string | null | undefined)[]) => (parts ?? []).filter(Boolean).join(\"\\n\\n\");\n\n  const readValues = () => ({\n    r: roleRef.current?.value || \"\",\n    t: taskRef.current?.value || \"\",\n    c: contextRef.current?.value || \"\",\n    k: constraintsRef.current?.value || \"\",\n  });\n\n  const assembleNow = (): string => {\n    const { r, t, c, k } = readValues();\n    return buildPartsString([\n      r && `You are ${r}.`,\n      t && `Task: ${t}`,\n      c && `Context: ${c}`,\n      k && `Constraints: ${k}`,\n    ]);\n  };\n\n  const buildColoredHTML = (): string => {\n    const { r, t, c, k } = readValues();\n    const block = (label: string, text: string, badgeClass: string) => {\n      const safe = escapeHTML(text);\n      return `\n        \n          ${label}\n          ${safe}\n        
\n      `;\n    };\n\n    const parts: string[] = [];\n    if (r) parts.push(block(\"Role\", `You are ${r}.`, \"bg-indigo-50 text-indigo-700\"));\n    if (t) parts.push(block(\"Task\", t, \"bg-blue-50 text-blue-700\"));\n    if (c) parts.push(block(\"Context\", c, \"bg-emerald-50 text-emerald-700\"));\n    if (k) parts.push(block(\"Constraints\", k, \"bg-amber-50 text-amber-700\"));\n    return parts.join(\"\") || escapeHTML(\"(Start typing above to see your prompt…)\");\n  };\n\n  const updatePreview = () => {\n    if (!previewRef.current) return;\n    if (colorPreview) previewRef.current.innerHTML = buildColoredHTML();\n    else previewRef.current.textContent = assembleNow() || \"(Start typing above to see your prompt…)\";\n  };\n\n  const schedulePreview = () => {\n    if (debounceTimer.current) window.clearTimeout(debounceTimer.current);\n    debounceTimer.current = window.setTimeout(updatePreview, 120);\n  };\n\n  // --- Presets adapted to 4‑step method ---\n  const presets: Record = {\n    none: {},\n    research: {\n      r: \"a university research librarian\",\n      t: \"Brainstorm 3 research questions and outline a 5‑page paper on social media and mental health\",\n      c: \"Sociology course; general academic audience; I feel overwhelmed; need starting points and key debates\",\n      k: \"Provide an outline with intro, 3 body sections, conclusion; suggest 2–3 credible sources per body section; plain language\",\n    },\n    email: {\n      r: \"a senior marketing analyst\",\n      t: \"Draft a warm, professional thank‑you email to last week's guest speaker at BYU Broadcasting (~150 words)\",\n      c: \"Student employee writing to a volunteer speaker on live production workflows\",\n      k: \"Include subject line; 2 versions; avoid clichés; sincere, concise tone\",\n    },\n    tutor: {\n      r: \"a patient algebra tutor\",\n      t: \"Create 5 practice problems solving for x and explain step by step\",\n      c: \"For a 7th‑grader anxious about math; needs encouragement\",\n      k: \"Max 5 steps per solution; end with a 2‑sentence pep talk; no jargon\",\n    },\n    fitness: {\n      r: \"a supportive fitness coach\",\n      t: \"Design a 3‑week beginner bodyweight plan (4 days/week)\",\n      c: \"No gym; 25–30 minutes/day; mild knee sensitivity\",\n      k: \"Table format (Day | Exercises | Time); include warm‑up/cool‑down; 1–2 easy modifications; safety notes\",\n    },\n    lighting: {\n      r: \"a studio lighting instructor\",\n      t: \"Outline a training video script for basic 3‑point lighting\",\n      c: \"Internal training for BYU Library software lab; audience: student employees\",\n      k: \"5 sections: Intro, Equipment, Step‑by‑step, Common mistakes, Final tips; 250–300 words\",\n    },\n  };\n\n  // Load preset (write directly to inputs; then update preview once)\n  useEffect(() => {\n    const p = presets[scenario] || {};\n    if (scenario === \"none\") return;\n    setRefVal(roleRef, p.r);\n    setRefVal(taskRef, p.t);\n    setRefVal(contextRef, p.c);\n    setRefVal(constraintsRef, p.k);\n    schedulePreview();\n  }, [scenario]);\n\n  // Update preview when color mode toggles\n  useEffect(() => { updatePreview(); }, [colorPreview]);\n\n  // Self‑tests (do not change unless clearly wrong)\n  useEffect(() => {\n    try {\n      const out1 = buildPartsString([\"A\", \"B\", \"C\"]);\n      if (out1 !== \"A\\n\\nB\\n\\nC\") throw new Error(\"join with double newlines failed\");\n      const out2 = buildPartsString([\"X\", \"\", \"Y\"]);\n      if (out2 !== \"X\\n\\nY\") throw new Error(\"filter empties failed\");\n      const out3 = buildPartsString([\"Solo\"]);\n      if (out3 !== \"Solo\") throw new Error(\"single item failed\");\n      const out4 = buildPartsString([\"P\", null as any, undefined as any, \"Q\"]);\n      if (out4 !== \"P\\n\\nQ\") throw new Error(\"ignore null/undefined failed\");\n      const out5 = buildPartsString([]);\n      if (out5 !== \"\") throw new Error(\"empty list failed\");\n      const out6 = buildPartsString([\"Line1\\nLine2\", \"C\"]);\n      if (out6 !== \"Line1\\nLine2\\n\\nC\") throw new Error(\"multiline part preservation failed\");\n      setTestStatus(\"pass\");\n    } catch (e) {\n      console.error(e);\n      setTestStatus(\"fail\");\n    }\n  }, []);\n\n  // Actions\n  const copy = async () => {\n    const text = colorPreview ? assembleNow() : (previewRef.current?.textContent || assembleNow());\n    await navigator.clipboard.writeText(text);\n  };\n\n  const downloadTxt = () => {\n    const text = assembleNow();\n    const blob = new Blob([text], { type: \"text/plain;charset=utf-8\" });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = \"prompt.txt\";\n    a.click();\n    URL.revokeObjectURL(url);\n  };\n\n  const Field = ({ label, refEl, placeholder, hint, color }: any) => (\n    \n      {label}\n      \n      {hint && {hint}
}\n    
\n  );\n\n  const resetAll = () => {\n    [roleRef, taskRef, contextRef, constraintsRef].forEach((r) => { if (r.current) r.current.value = \"\"; });\n    if (previewRef.current) previewRef.current.textContent = \"(Start typing above to see your prompt…)\";\n    setScenario(\"none\");\n  };\n\n  return (\n    \n      \n        \n          Interactive Prompt Builder · 4‑Step
\n          \n             setScenario(e.target.value)}\n              title=\"Load a preset scenario\"\n            >\n              \n              \n              \n              \n              \n              \n            \n            \n            \n               setColorPreview(e.target.checked)} />\n              Color preview\n            \n          
\n        
\n\n        {/* Four core fields */}\n        \n          \n          \n          \n          \n        
\n\n        {/* Assembled prompt preview */}\n        \n          Assembled Prompt
\n          {colorPreview ? (\n            \n          ) : (\n            (Start typing above to see your prompt…)
\n          )}\n          \n            \n            \n            \n          
\n        
\n\n        \n          Tip: Role → Task → Context → Constraints. Inputs persist until Reset. Color preview adds labeled chips.\n          {testStatus === \"pass\" && (\n            Self‑tests passed\n          )}\n          {testStatus === \"fail\" && (\n            Self‑tests failed (see console)\n          )}\n        
\n      
\n    \n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","15364700493523419456","traceTime",1790170584428]