[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_103":104,"_105":106},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","cknowlesbadluck","name","shortcut-studio","path","ui.tsx","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":36,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/cknowlesbadluck/shortcut-studio/code/ui.tsx","extension","id","19e30dab-641b-44bf-8313-4fb26ba634de","fileId","899b2192-9d05-11f1-84a8-1607ee4eb77e","parentId","branchId","5a4cb687-6c5a-46e2-8d87-1233b7ab9c1b","branchVersion",7,"latest",true,"createdAt",["D",1787278253417],"version",0,"fileType","script","content","// ui.tsx — client-side React studio for Shortcut Studio.\nimport { useState, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ntype FieldDef = {\n key: string; label: string; type: string;\n options?: { value: string | number | boolean; label: string }[];\n placeholder?: string; help?: string;\n};\ntype ActionMeta = { id: string; name: string; category: string; icon: string; color: string; description: string; fields: FieldDef[] };\ntype TemplateMeta = { key: string; name: string; category: string; icon: string; color: string; description: string; tags: string[]; steps: Step[] };\ntype Step = { id: string; values?: Record };\n\ntype Meta = { actions: ActionMeta[]; templates: TemplateMeta[]; aiConfigured: boolean };\n\nconst byId = (m: Meta, id: string) => m.actions.find((a) => a.id === id);\n\nfunction kebab(s: string) { return s.replace(/\\W/g, \"-\").replace(/-+/g, \"-\"); }\n\n// ---------- small presentational bits ----------\nconst Card = ({ children, className = \"\" }: any) => (\n

{children}

\n);\nconst btn = \"px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-40\";\n\nfunction Field({ f, value, onChange }: { f: FieldDef; value: unknown; onChange: (v: unknown) => void }) {\n const v = (value ?? \"\") as string | number | boolean;\n const base = \"w-full bg-slate-800 border border-slate-700 rounded-md px-2.5 py-1.5 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 placeholder-slate-500\";\n return (\n \n {f.label}\n {f.type === \"textarea\" ? (\n

onChange(e.target.value)} />\n      ) : f.type === \"select\" ? (\n        <select className={`${base} mt-1`} value={String(v)} onChange={(e) => onChange(e.target.value)}>\n          {f.options?.map((o) => <option key={String(o.value)} value={String(o.value)}>{o.label}</option>)}\n        </select>\n      ) : f.type === \"toggle\" ? (\n        <div className=\"mt-1\">\n          <input type=\"checkbox\" checked={Boolean(v)} onChange={(e) => onChange(e.target.checked)}\n            className=\"h-4 w-4 accent-indigo-500\" />\n        </div>\n      ) : (\n        <input className={`${base} mt-1`} type={f.type === \"number\" ? \"number\" : \"text\"}\n          placeholder={f.placeholder} value={String(v)} onChange={(e) => onChange(f.type === \"number\" ? Number(e.target.value) : e.target.value)} />\n      )}\n      {f.help && <span className=\"block text-xs text-slate-500 mt-0.5\">{f.help}</span>}\n    </label>\n  );\n}\n\n// ---------- Editor ----------\nfunction Editor({ meta, name, setName, steps, setSteps, exporting, onExport }: {\n  meta: Meta; name: string; setName: (s: string) => void;\n  steps: Step[]; setSteps: (s: Step[]) => void; exporting: boolean; onExport: () => void;\n}) {\n  const byCat = useMemo(() => {\n    const m = new Map<string, ActionMeta[]>();\n    for (const a of meta.actions) {\n      const arr = m.get(a.category) || [];\n      arr.push(a); m.set(a.category, arr);\n    }\n    return [...m.entries()];\n  }, [meta]);\n\n  const setVal = (i: number, key: string, v: unknown) => {\n    const next = steps.map((s, idx) => idx === i\n      ? { ...s, values: { ...(s.values || {}), [key]: v } } : s);\n    setSteps(next);\n  };\n  const remove = (i: number) => setSteps(steps.filter((_, idx) => idx !== i));\n  const move = (i: number, d: number) => {\n    const j = i + d;\n    if (j < 0 || j >= steps.length) return;\n    const next = [...steps];\n    [next[i], next[j]] = [next[j], next[i]];\n    setSteps(next);\n  };\n  const add = (i: number, id: string) => {\n    const next = [...steps];\n    next.splice(i + 1, 0, { id });\n    setSteps(next);\n  };\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex items-center gap-3 px-4 py-3 border-b border-slate-800\">\n        <input value={name} onChange={(e) => setName(e.target.value)}\n          className=\"flex-1 bg-transparent text-xl font-semibold focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded px-2 py-1\" placeholder=\"Shortcut name\" />\n        <button onClick={onExport} disabled={exporting || !steps.length} className={`${btn} ${exporting ? \"bg-slate-700\" : \"bg-indigo-600 hover:bg-indigo-500\"} text-white`}>\n          {exporting ? \"Building…\" : \"⬇ Download .shortcut\"}\n        </button>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto px-4 py-4 space-y-2\">\n        {steps.length === 0 && (\n          <p className=\"text-slate-500 text-sm text-center py-10\">No actions yet. Use <b>AI Build</b>, pick a <b>Template</b>, or add actions with the + below each row.</p>\n        )}\n        {steps.map((s, i) => {\n          const def = byId(meta, s.id);\n          const fields = def ? def.fields : [];\n          const displayName = def ? def.name : s.id.split(\".\").pop() || s.id;\n          const icon = def ? def.icon : \"⚙️\";\n          return (\n            <Card key={i} className=\"p-3\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-lg\">{icon}</span>\n                <span className=\"font-medium text-sm flex-1\">{i + 1}. {displayName}</span>\n                <div className=\"flex gap-1\">\n                  <button onClick={() => move(i, -1)} disabled={i === 0} className={`${btn} !px-2 text-slate-400 hover:bg-slate-800`} title=\"Move up\">↑</button>\n                  <button onClick={() => move(i, 1)} disabled={i === steps.length - 1} className={`${btn} !px-2 text-slate-400 hover:bg-slate-800`} title=\"Move down\">↓</button>\n                  <button onClick={() => remove(i)} className={`${btn} !px-2 text-rose-400 hover:bg-slate-800`} title=\"Remove\">✕</button>\n                </div>\n              </div>\n              {fields.length > 0 && (\n                <div className=\"mt-2 space-y-2\">\n                  {fields.map((f) => (\n                    <Field key={f.key} f={f} value={s.values?.[f.key]}\n                      onChange={(v) => setVal(i, f.key, v)} />\n                  ))}\n                </div>\n              )}\n              <div className=\"mt-2 flex items-center gap-1\">\n                <details className=\"group relative\">\n                  <summary className={`${btn} text-xs text-indigo-300 hover:bg-slate-800 cursor-pointer list-none`}>+ Add action</summary>\n                  <div className=\"absolute z-20 mt-1 w-64 max-h-64 overflow-y-auto bg-slate-800 border border-slate-700 rounded-lg shadow-xl p-2\">\n                    {byCat.map(([cat, acts]) => (\n                      <div key={cat}>\n                        <div className=\"text-[10px] uppercase text-slate-500 font-semibold px-1 py-0.5\">{cat}</div>\n                        {acts.map((a) => (\n                          <button key={a.id} onClick={() => add(i, a.id)}\n                            className=\"w-full text-left px-2 py-1 text-xs rounded hover:bg-slate-700 flex items-center gap-2\">\n                            <span>{a.icon}</span>{a.name}\n                          </button>\n                        ))}\n                      </div>\n                    ))}\n                  </div>\n                </details>\n              </div>\n            </Card>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n// ---------- Templates ----------\nfunction Templates({ meta, onLoad }: { meta: Meta; onLoad: (name: string, steps: Step[]) => void }) {\n  const [catFilter, setCatFilter] = useState(\"All\");\n  const cats = [\"All\", ...Array.from(new Set(meta.templates.map((t) => t.category)))];\n  const list = meta.templates.filter((t) => catFilter === \"All\" || t.category === catFilter);\n  return (\n    <div className=\"px-4 py-4\">\n      <div className=\"flex gap-2 mb-3 flex-wrap\">\n        {cats.map((c) => (\n          <button key={c} onClick={() => setCatFilter(c)}\n            className={`${btn} ${catFilter === c ? \"bg-indigo-600 text-white\" : \"bg-slate-800 text-slate-300 hover:bg-slate-700\"}`}>{c}</button>\n        ))}\n      </div>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n        {list.map((t) => (\n          <Card key={t.key} className=\"p-4 hover:border-indigo-600 transition-colors cursor-pointer\" >\n            <div className=\"flex items-center gap-2 mb-1\">\n              <span className=\"text-2xl\">{t.icon}</span>\n              <span className=\"font-semibold\">{t.name}</span>\n            </div>\n            <p className=\"text-sm text-slate-400 mb-2\">{t.description}</p>\n            <div className=\"flex gap-1.5 flex-wrap mb-3\">\n              {t.tags.map((g) => <span key={g} className=\"text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-indigo-300\">{g}</span>)}\n            </div>\n            <button onClick={() => onLoad(t.name, t.steps)}\n              className={`${btn} bg-indigo-600 hover:bg-indigo-500 text-white`}>Open in editor</button>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ---------- AI Build ----------\nfunction AIPane({ meta, onLoad }: { meta: Meta; onLoad: (name: string, steps: Step[]) => void }) {\n  const [desc, setDesc] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [err, setErr] = useState(\"\");\n\n  async function go() {\n    setErr(\"\"); setBusy(true);\n    try {\n      const r = await fetch(\"/api/ai\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ description: desc }) });\n      const d = await r.json();\n      if (!d.steps?.length) { setErr(d.error || \"Nothing came back.\"); return; }\n      onLoad(d.name, d.steps);\n    } catch (e) {\n      setErr(e instanceof Error ? e.message : \"Request failed.\");\n    } finally { setBusy(false); }\n  }\n\n  if (!meta.aiConfigured) {\n    return (\n      <div className=\"px-4 py-6 max-w-xl\">\n        <h2 className=\"text-xl font-bold mb-2\">Describe & Build</h2>\n        <p className=\"text-slate-400 mb-4\">This feature calls an LLM. No AI key is set on the val yet, so it's disabled.</p>\n        <ol className=\"text-sm text-slate-300 space-y-1 list-decimal list-inside\">\n          <li>Open the val's <b>environment variables</b>.</li>\n          <li>Add <code className=\"text-indigo-300\">OPENAI_API_KEY</code> (or <code className=\"text-indigo-300\">ANTHROPIC_API_KEY</code>).</li>\n          <li>Reload this page.</li>\n        </ol>\n        <p className=\"text-xs text-slate-500 mt-4\">Templates + manual editing + export all still work without a key — AI is additive.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"px-4 py-6 max-w-xl\">\n      <h2 className=\"text-xl font-bold mb-2\">Describe the Shortcut</h2>\n      <p className=\"text-slate-400 text-sm mb-4\">Tell it what you want in plain English. It returns an editable action list.</p>\n      <textarea value={desc} onChange={(e) => setDesc(e.target.value)}\n        placeholder={\"e.g. \\\"Check a weather API for London, read the temperature, and if it's over 25 degrees send me a notification saying it's hot. Else say it's mild.\\\"\"}\n        className=\"w-full bg-slate-800 border border-slate-700 rounded-lg p-3 h-32 text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500\" />\n      {err && <p className=\"text-rose-400 text-sm mt-2\">{err}</p>}\n      <button onClick={go} disabled={busy || !desc.trim()}\n        className={`${btn} ${busy ? \"bg-slate-700\" : \"bg-indigo-600 hover:bg-indigo-500\"} text-white mt-3`}>\n        {busy ? \"Building…\" : \"⚡ Build it\"}\n      </button>\n    </div>\n  );\n}\n\n// ---------- App ----------\nfunction App({ meta }: { meta: Meta }) {\n  const [tab, setTab] = useState<\"build\" | \"ai\" | \"templates\">(\"build\");\n  const [name, setName] = useState(\"My Shortcut\");\n  const [steps, setSteps] = useState<Step[]>([]);\n  const [exporting, setExporting] = useState(false);\n\n  function load(name: string, steps: Step[]) { setName(name); setSteps(steps); setTab(\"build\"); }\n\n  async function onExport() {\n    setExporting(true);\n    try {\n      const r = await fetch(\"/api/build\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ name, steps }) });\n      if (!r.ok) { return; }\n      const blob = await r.blob();\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement(\"a\");\n      a.href = url; a.download = `${kebab(name) || \"Shortcut\"}.shortcut`;\n      document.body.appendChild(a); a.click(); a.remove();\n      URL.revokeObjectURL(url);\n    } finally { setExporting(false); }\n  }\n\n  const tabs = [\n    { id: \"build\", label: \"🧱 Editor\", n: steps.length },\n    { id: \"ai\", label: \"✨ AI Build\" },\n    { id: \"templates\", label: \"🗂 Templates\", n: meta.templates.length },\n  ] as any[];\n\n  return (\n    <div className=\"flex h-screen flex-col\">\n      <header className=\"flex items-center justify-between px-4 py-3 border-b border-slate-800\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-2xl\">⚡</span>\n          <h1 className=\"font-bold text-lg tracking-tight\">Shortcut Studio</h1>\n          <span className=\"text-xs text-slate-500 ml-1\">by @cknowlesbadluck</span>\n        </div>\n        <a href=\"/source\" className=\"text-xs text-slate-400 hover:text-indigo-300\">view source</a>\n      </header>\n\n      <div className=\"flex flex-1 overflow-hidden flex-col md:flex-row\">\n        <nav className=\"flex md:flex-col gap-1 p-2 md:w-48 md:border-r border-slate-800 bg-slate-900/60\">\n          {tabs.map((t) => (\n            <button key={t.id} onClick={() => setTab(t.id)}\n              className={`${btn} text-left ${tab === t.id ? \"bg-indigo-600 text-white\" : \"text-slate-300 hover:bg-slate-800\"}`}>\n              {t.label}{t.n != null && <span className=\"opacity-60 ml-1\">({t.n})</span>}\n            </button>\n          ))}\n        </nav>\n        <main className=\"flex-1 overflow-hidden\">\n          {tab === \"build\" && <Editor meta={meta} name={name} setName={setName} steps={steps} setSteps={setSteps}\n            exporting={exporting} onExport={onExport} />}\n          {tab === \"ai\" && <AIPane meta={meta} onLoad={load} />}\n          {tab === \"templates\" && <Templates meta={meta} onLoad={load} />}\n        </main>\n      </div>\n    </div>\n  );\n}\n\nconst rootEl = document.getElementById(\"root\");\nfunction main() {\n  fetch(\"/api/meta\")\n    .then((r) => r.json())\n    .then((meta: Meta) => {\n      if (rootEl) createRoot(rootEl).render(<App meta={meta} />);\n    })\n    .catch((e) => {\n      if (rootEl) rootEl.innerHTML = `<p style=\"padding:2rem;color:#f87171\">Failed to load app: ${e.message}</p>`;\n    });\n}\nvoid main();\n","deleted",false,"label",[14],"02c26f35-91a8-42a2-bdf5-6dc564670f9c",["D",1787278097773],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI iOS Shortcut builder + library — exportable .shortcut files","imageUrl","userId","0f3ebc00-d42e-4106-9436-e39ece7e61a5","pinnedFileId","2cdd804e-9d05-11f1-a48c-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a021f3-3a16-7267-929c-d4391eb24b8b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_102":98},"org",{"_9":10,"_95":96,"_97":98,"_55":56,"_99":100,"_101":42},"branch",{"_35":85,"_11":86,"_22":28,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":12,"_94":10},"isOwned",53,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Christopher Knowles","avatar","https://avatars.githubusercontent.com/u/313156363?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_78":-5,"_136":137,"_138":139,"_140":141,"_142":42,"_143":42,"_144":42,"_145":32,"_146":-5,"_147":-7,"_148":-7,"_149":36,"_150":42,"_151":42,"_152":-5,"_153":42,"_154":42,"_155":42,"_156":-5},"ENV",{"_107":108,"_109":110,"_111":86,"_112":113,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>