[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_335":336,"_337":338},"routes/_app.x.$handle.$name",{"_100":99,"_32":46,"_108":90,"_27":54,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":60,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",39,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/shared/LoginScreen.tsx","latestPath","fileId","5d54f32e-a890-11f1-8a9f-1607ee4eb77e","name","LoginScreen.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useId, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AppConfig, HintedAccount } from \"./types.ts\";\nimport { loginUrl, searchActors, typeaheadClient, typeaheadQuery, type TypeaheadActor } from \"./api.ts\";\nimport { loadLoggedinRenderer, loadOriginLabels } from \"./loggedin.ts\";\n\ntype Props = {\n config: AppConfig;\n};\n\nexport function LoginScreen({ config }: Props) {\n const iframeRef = useRef(null);\n const listRef = useRef(null);\n const comboRef = useRef(null);\n const listboxId = useId();\n const [handle, setHandle] = useState(\"\");\n const [status, setStatus] = useState(\"Looking for AT Proto accounts already used on this device…\");\n const [error, setError] = useState(\"\");\n const [accounts, setAccounts] = useState([]);\n const [suggestions, setSuggestions] = useState([]);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n const list = listRef.current;\n if (!iframe || !list) return;\n\n let cancelled = false;\n (async () => {\n try {\n const Loggedin = await loadLoggedinRenderer(config.loggedinOrigin);\n const labels = await loadOriginLabels(config.loggedinOrigin);\n if (cancelled) return;\n\n const startOauth = (did: string, resolvedHandle?: string) => {\n location.href = loginUrl(resolvedHandle && !resolvedHandle.startsWith(\"did:\") ? resolvedHandle : did);\n };\n\n Loggedin.listenForPicked(config.loggedinOrigin, (did) => startOauth(did));\n Loggedin.mountEmbed(iframe, `${config.loggedinOrigin}/embed`, {\n onReady: () => setStatus(\"This browser already has a loggedin.fyi session. Pick an account below.\"),\n onNeedsAccess: () =>\n setStatus(\"Use Continue in the embed to grant this site access to the loggedin.fyi cookie. A grant here does not cover the other demo.\"),\n onPopup: () =>\n setStatus(\"Storage access was denied. Use the first-party chooser, or sign in with a handle.\"),\n onUnavailable: () =>\n setStatus(\"This browser blocked the silent cookie. Use the button in the embed, or sign in with a handle.\"),\n onAccounts: (next) => {\n setAccounts(next);\n Loggedin.renderAccountList(list, next, {\n originLabels: labels,\n onPick: startOauth,\n });\n if (next.length) {\n setStatus(\"These AT Proto accounts were saved on this device by another client.\");\n } else {\n setStatus(\"No hinted accounts yet. Sign in below, then the other demo can offer this account.\");\n }\n },\n onPicked: (did) => startOauth(did),\n });\n } catch (err) {\n if (!cancelled) setError(err instanceof Error ? err.message : \"loggedin.fyi is unreachable\");\n }\n })();\n\n return () => {\n cancelled = true;\n iframe.removeAttribute(\"src\");\n };\n }, [config.loggedinOrigin]);\n\n useEffect(() => {\n const q = typeaheadQuery(handle);\n if (!q) {\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n return;\n }\n const ac = new AbortController();\n const timer = setTimeout(async () => {\n try {\n const actors = await searchActors(q, typeaheadClient(config.origin || location.origin), ac.signal);\n setSuggestions(actors);\n setOpen(actors.length > 0);\n setActiveIndex(actors.length > 0 ? 0 : -1);\n } catch (err) {\n if (err instanceof DOMException && err.name === \"AbortError\") return;\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n }\n }, 250);\n return () => {\n clearTimeout(timer);\n ac.abort();\n };\n }, [config.origin, handle]);\n\n useEffect(() => {\n function onPointerDown(event: MouseEvent) {\n if (comboRef.current && !comboRef.current.contains(event.target as Node)) {\n setOpen(false);\n }\n }\n document.addEventListener(\"mousedown\", onPointerDown);\n return () => document.removeEventListener(\"mousedown\", onPointerDown);\n }, []);\n\n const crate = config.slug === \"cratewalk\";\n\n function pickActor(actor: TypeaheadActor) {\n setHandle(actor.handle);\n setSuggestions([]);\n setOpen(false);\n location.href = loginUrl(actor.handle);\n }\n\n function onHandleKeyDown(event: React.KeyboardEvent) {\n if (!open || suggestions.length === 0) {\n if (event.key === \"Escape\") setOpen(false);\n return;\n }\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setActiveIndex((i) => (i + 1) % suggestions.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setActiveIndex((i) => (i <= 0 ? suggestions.length - 1 : i - 1));\n } else if (event.key === \"Enter\" && activeIndex >= 0 && suggestions[activeIndex]) {\n event.preventDefault();\n pickActor(suggestions[activeIndex]);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n }\n }\n\n return (\n

\n \n \n {crate ? \"Demo B · Cratewalk\" : \"Demo A · Lightbox\"}\n

\n {config.appName}\n

\n {config.tagline} Sign in with the usual Bluesky / AT Proto OAuth flow. If another participating client\n already heartbeated on this device, pick that account instead.\n

\n\n {\n const value = handle.trim();\n if (!value) {\n event.preventDefault();\n setError(\"Enter a handle like alice.bsky.social\");\n }\n }}\n >\n \n Handle or DID\n \n

\n {\n setHandle(event.target.value);\n setError(\"\");\n }}\n onKeyDown={onHandleKeyDown}\n onFocus={() => {\n if (suggestions.length) setOpen(true);\n }}\n placeholder=\"you.bsky.social\"\n autoComplete=\"off\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={open && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined}\n className={\n crate\n ? \"w-full border-4 border-black bg-[#fff6df] px-3 py-2 font-mono text-sm text-[#1b1208] outline-none\"\n : \"w-full rounded-lg border border-[#4a4336] bg-[#0e0c0a] px-3 py-2.5 font-mono text-sm text-[#f6efe2] outline-none focus:border-[#d4a017]\"\n }\n />\n {open && suggestions.length > 0 ? (\n \n {suggestions.map((actor, index) => {\n const active = index === activeIndex;\n return (\n

\n setActiveIndex(index)}\n onClick={() => pickActor(actor)}\n className={\n crate\n ? `flex w-full items-center gap-2 px-2 py-2 text-left font-mono text-xs ${\n active ? \"bg-[#6b2d6b] text-[#fff6df]\" : \"text-[#1b1208]\"\n }`\n : `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${\n active ? \"bg-[#2a241c] text-[#f6efe2]\" : \"text-[#d9d0be]\"\n }`\n }\n >\n {actor.avatar ? (\n \n ) : (\n \n )}\n \n {actor.displayName || `@${actor.handle}`}\n \n @{actor.handle}\n \n \n \n

\n );\n })}\n \n ) : null}\n

\n \n Sign in with Bluesky\n \n \n\n

\n\n

\n Already used on this device\n

{status}

\n \n \n {accounts.length === 0 ? null : (\n

\n Picking one starts a normal PDS OAuth login with that DID as the hint — not a new sign-in service.\n

\n )}\n {error ? (\n

{error}

\n ) : null}\n

\n \n view source\n \n

\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useId, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AppConfig, HintedAccount } from \"./types.ts\";\nimport { loginUrl, searchActors, typeaheadClient, typeaheadQuery, type TypeaheadActor } from \"./api.ts\";\nimport { loadLoggedinRenderer, loadOriginLabels } from \"./loggedin.ts\";\n\ntype Props = {\n config: AppConfig;\n};\n\nexport function LoginScreen({ config }: Props) {\n const iframeRef = useRef(null);\n const listRef = useRef(null);\n const comboRef = useRef(null);\n const listboxId = useId();\n const [handle, setHandle] = useState(\"\");\n const [status, setStatus] = useState(\"Looking for AT Proto accounts already used on this device…\");\n const [error, setError] = useState(\"\");\n const [accounts, setAccounts] = useState([]);\n const [suggestions, setSuggestions] = useState([]);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n const list = listRef.current;\n if (!iframe || !list) return;\n\n let cancelled = false;\n (async () => {\n try {\n const Loggedin = await loadLoggedinRenderer(config.loggedinOrigin);\n const labels = await loadOriginLabels(config.loggedinOrigin);\n if (cancelled) return;\n\n const startOauth = (did: string, resolvedHandle?: string) => {\n location.href = loginUrl(resolvedHandle && !resolvedHandle.startsWith(\"did:\") ? resolvedHandle : did);\n };\n\n Loggedin.listenForPicked(config.loggedinOrigin, (did) => startOauth(did));\n Loggedin.mountEmbed(iframe, `${config.loggedinOrigin}/embed`, {\n onReady: () => setStatus(\"This browser already has a loggedin.fyi session. Pick an account below.\"),\n onNeedsAccess: () =>\n setStatus(\"Use Continue in the embed to grant this site access to the loggedin.fyi cookie. A grant here does not cover the other demo.\"),\n onPopup: () =>\n setStatus(\"Storage access was denied. Use the first-party chooser, or sign in with a handle.\"),\n onUnavailable: () =>\n setStatus(\"This browser blocked the silent cookie. Use the button in the embed, or sign in with a handle.\"),\n onAccounts: (next) => {\n setAccounts(next);\n Loggedin.renderAccountList(list, next, {\n originLabels: labels,\n onPick: startOauth,\n });\n if (next.length) {\n setStatus(\"These AT Proto accounts were saved on this device by another client.\");\n } else {\n setStatus(\"No hinted accounts yet. Sign in below, then the other demo can offer this account.\");\n }\n },\n onPicked: (did) => startOauth(did),\n });\n } catch (err) {\n if (!cancelled) setError(err instanceof Error ? err.message : \"loggedin.fyi is unreachable\");\n }\n })();\n\n return () => {\n cancelled = true;\n iframe.removeAttribute(\"src\");\n };\n }, [config.loggedinOrigin]);\n\n useEffect(() => {\n const q = typeaheadQuery(handle);\n if (!q) {\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n return;\n }\n const ac = new AbortController();\n const timer = setTimeout(async () => {\n try {\n const actors = await searchActors(q, typeaheadClient(config.origin || location.origin), ac.signal);\n setSuggestions(actors);\n setOpen(actors.length > 0);\n setActiveIndex(actors.length > 0 ? 0 : -1);\n } catch (err) {\n if (err instanceof DOMException && err.name === \"AbortError\") return;\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n }\n }, 250);\n return () => {\n clearTimeout(timer);\n ac.abort();\n };\n }, [config.origin, handle]);\n\n useEffect(() => {\n function onPointerDown(event: MouseEvent) {\n if (comboRef.current && !comboRef.current.contains(event.target as Node)) {\n setOpen(false);\n }\n }\n document.addEventListener(\"mousedown\", onPointerDown);\n return () => document.removeEventListener(\"mousedown\", onPointerDown);\n }, []);\n\n const crate = config.slug === \"cratewalk\";\n\n function pickActor(actor: TypeaheadActor) {\n setHandle(actor.handle);\n setSuggestions([]);\n setOpen(false);\n location.href = loginUrl(actor.handle);\n }\n\n function onHandleKeyDown(event: React.KeyboardEvent) {\n if (!open || suggestions.length === 0) {\n if (event.key === \"Escape\") setOpen(false);\n return;\n }\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setActiveIndex((i) => (i + 1) % suggestions.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setActiveIndex((i) => (i <= 0 ? suggestions.length - 1 : i - 1));\n } else if (event.key === \"Enter\" && activeIndex >= 0 && suggestions[activeIndex]) {\n event.preventDefault();\n pickActor(suggestions[activeIndex]);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n }\n }\n\n return (\n

\n \n \n {crate ? \"Demo B · Cratewalk\" : \"Demo A · Lightbox\"}\n

\n {config.appName}\n

\n {config.tagline} Sign in with the usual Bluesky / AT Proto OAuth flow. If another participating client\n already heartbeated on this device, pick that account instead.\n

\n\n {\n const value = handle.trim();\n if (!value) {\n event.preventDefault();\n setError(\"Enter a handle like alice.bsky.social\");\n }\n }}\n >\n \n Handle or DID\n \n

\n );\n })}\n \n ) : null}\n

\n \n Sign in with Bluesky\n \n \n\n

\n\n

\n Already used on this device\n

{status}

\n \n \n {accounts.length === 0 ? null : (\n

\n Picking one starts a normal PDS OAuth login with that DID as the hint — not a new sign-in service.\n

\n )}\n {error ? (\n

{error}

\n ) : null}\n \n

\n );\n}\n","createdAt",["D",1789084523402],"branchVersion","branchId","548f9140-a1c9-476c-84a6-0db44da905ac","id","6e941c33-a65c-4d6d-9817-70d284ac3de5","cratewalk-loggedin",["D",1788547090141],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","4a195d61-960e-47fc-a2de-babac7864ff9","pinnedFileId","5d1d09f0-a890-11f1-a0db-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4281254f-bfbc-421d-89b2-3fe0572f0e97","tursoName","6e941c33a65c4d6d981770d284ac3de5","tursoHostname","6e941c33a65c4d6d981770d284ac3de5-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512647429],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":56,"_104":105,"_106":25},"branch",{"_13":14,"_32":90,"_44":43,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":46,"_98":99},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","alexmcroberts","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhUQ1k1VHlSUENxb1FtUlRYZUVXbWRNOSIsImluaXRpYWxzIjoiQU0ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":330,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":331,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":332,"_85":333,"_87":334,"_89":25},"tree",[183,194,200,201,202],"files",[183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202],"counts",{"_172":64,"_173":149,"_174":64,"_175":176,"_177":178},"contents",[129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":166,"_32":167,"_30":168,"_136":-5,"_42":43,"_41":169,"_138":60,"_39":170,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_27":171},{"_44":159,"_32":160,"_30":161,"_136":-5,"_42":43,"_41":162,"_138":60,"_39":163,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_27":165},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":156,"_13":64,"_34":20,"_36":157,"_24":25,"_142":-5,"_27":158},{"_44":144,"_32":145,"_30":146,"_136":-5,"_42":43,"_41":147,"_138":60,"_39":148,"_13":149,"_34":20,"_36":150,"_24":25,"_142":-5,"_27":151},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":139,"_13":64,"_34":140,"_36":141,"_24":25,"_142":46,"_27":143},"b2eac35e-c0ac-4d76-a584-42056808d077","main.http.ts","parentId",7,"latest",["D",1788547341597],"http","import { createDemoApp } from \"./shared/create-app.ts\";\n\nconst app = createDemoApp({\n slug: \"cratewalk\",\n appName: \"Cratewalk\",\n tagline: \"Every post ships in a pixelated cardboard box on a half-width belt.\",\n mode: \"posts\",\n frontendDir: \"/frontend/cratewalk\",\n});\n\nexport default app.fetch;\n","label",[135],"7f58d007-ed16-45ea-a3a8-dab6af25d63b","README.md","5de29d64-a890-11f1-973a-1607ee4eb77e",26,["D",1788989641384],1,"# loggedin.fyi Val Town demos\n\nTwo AT Proto client demos that share one login workflow and both talk to the [loggedin.fyi](https://loggedin.fyi) Cloudflare Worker.\n\nThey must be **two origins**. Logging into Lightbox heartbeats a DID; Cratewalk can then offer that account as a normal OAuth hint.\n\n```mermaid\nflowchart LR\n A[Lightbox] -->|OAuth + heartbeat| W[loggedin.fyi Worker]\n B[Cratewalk] -->|list hinted DIDs| W\n A -->|AT Proto OAuth| P[User PDS]\n B -->|AT Proto OAuth| P\n```\n\n| Demo | HTTP file | Planned subdomain | After login |\n| --- | --- | --- | --- |\n| A · Lightbox | [lightbox.ts](url:lightbox.ts) | `lightbox-loggedin.val.run` | Images from the current feed, plus a feed picker |\n| B · Cratewalk | [cratewalk.ts](url:cratewalk.ts) | `cratewalk-loggedin.val.run` | Posts arrive in Habbo-style boxes on a half-width conveyor |\n\n## Deploy as two vals\n\nCopy this folder into two Val Town vals (or remix twice). Mark `lightbox.ts` as the HTTP trigger in one and `cratewalk.ts` in the other.\n\nClaim kebab-case subdomains:\n\n- `lightbox-loggedin`\n- `cratewalk-loggedin`\n\nIf a name is taken, add a random 1–100 suffix and update [allowlist.json](../allowlist.json).\n\n## Environment variables\n\nEach val needs a cookie secret of at least 32 characters:\n\n👉 Add `COOKIE_SECRET` here: https://www.val.town/x/HANDLE/VAL_NAME/environment-variables?key=COOKIE_SECRET\n\nOptional:\n\n👉 Add `PUBLIC_BASE_URL` here: https://www.val.town/x/HANDLE/VAL_NAME/environment-variables?key=PUBLIC_BASE_URL\n\n👉 Add `LOGGEDIN_ORIGIN` here: https://www.val.town/x/HANDLE/VAL_NAME/environment-variables?key=LOGGEDIN_ORIGIN\n\n👉 Add `SISTER_APP_URL` here: https://www.val.town/x/HANDLE/VAL_NAME/environment-variables?key=SISTER_APP_URL\n\n| Key | Default | Notes |\n| --- | --- | --- |\n| `COOKIE_SECRET` | — | Required. 32+ random characters. |\n| `PUBLIC_BASE_URL` | request origin | Set to `https://lightbox-loggedin.val.run` (or Cratewalk) after the subdomain is claimed. This is the OAuth `client_id` origin. |\n| `LOGGEDIN_ORIGIN` | `https://loggedin.fyi` | Use `http://localhost:8787` against a local Worker. |\n| `SISTER_APP_URL` | unset | The other demo’s URL, for the header link. |\n\nReplace `HANDLE/VAL_NAME` with each val after it exists.\n\n## Allowlist\n\nAdd both production origins to the Worker allowlist before the embed can heartbeat or list accounts. The repo already has:\n\n- `https://lightbox-loggedin.val.run`\n- `https://cratewalk-loggedin.val.run`\n\nIf you use generated `*.web.val.run` URLs, put those origins in `allowlist.json` and redeploy the Worker.\n\n## Local UI preview\n\n```bash\nnode val-town/preview/serve.mjs\n```\n\nThen open (Lightbox) and (Cratewalk login). Preview talks to `https://loggedin-fyi.polished-bird-a3ae.workers.dev` unless `LOGGEDIN_ORIGIN` is set.\n\n## After login\n\nBoth apps:\n\n1. Show a handle field and **Sign in with Bluesky** (`GET /login?handle=…` → PDS OAuth).\n2. Embed `LOGGEDIN_ORIGIN/embed` and render hinted DIDs from the Worker.\n3. Heartbeat the signed-in DID (Chrome silent path). On Safari / iOS, `heartbeat()` opens a first-party `/save` window; `/enroll` remains as a fallback.\n4. Fetch the home timeline or a picked generator through the user’s PDS (`atproto-proxy` to the Bluesky AppView).\n",[145],"bb4c56df-a114-431f-a99d-fd3c455413ac","AGENTS.md","5da85668-a890-11f1-ab6d-1607ee4eb77e",19,["D",1788547342502],"# loggedin.fyi demos\n\nTwo HTTP vals. Do not merge them onto one origin — the product story is “another AT Proto client already used this browser.”\n\n- `lightbox.ts` — images from the signed-in feed, feed picker, film UI\n- `cratewalk.ts` — posts in pixel cardboard boxes on a half-width conveyor\n\nShared OAuth + Worker integration lives in `shared/`. Frontend is React 18.2.0 + Twind.\n\nRequired env: `COOKIE_SECRET` (32+ chars). Optional: `PUBLIC_BASE_URL`, `LOGGEDIN_ORIGIN`, `SISTER_APP_URL`.\n",[153],"d9f573b1-7084-461e-a2b1-44ad0b473453","shared","5c6d814c-a890-11f1-938e-1607ee4eb77e",3,["D",1788547340451],"directory",[160],"74d5a19b-2a66-4a58-b1ec-825a51819753","frontend","5c3ec1fe-a890-11f1-b0a0-1607ee4eb77e",2,["D",1788547340133],[167],"pulls","branches","forks","envVars",{"_179":181,"_182":64},"connections",{"_179":64,"_180":64},"count","unfilledCount",4,"emptyCount",{"_44":166,"_32":167,"_30":168,"_136":-5,"_42":43,"_41":169,"_138":60,"_39":327,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_204":328,"_27":329},{"_44":323,"_32":306,"_30":301,"_136":168,"_42":43,"_41":181,"_138":60,"_39":324,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_204":325,"_27":326},{"_44":315,"_32":316,"_30":317,"_136":301,"_42":43,"_41":318,"_138":60,"_39":319,"_13":64,"_34":35,"_36":320,"_24":25,"_142":-5,"_204":321,"_27":322},{"_44":307,"_32":308,"_30":309,"_136":301,"_42":43,"_41":310,"_138":60,"_39":311,"_13":64,"_34":35,"_36":312,"_24":25,"_142":-5,"_204":313,"_27":314},{"_44":298,"_32":299,"_30":300,"_136":301,"_42":43,"_41":290,"_138":60,"_39":302,"_13":64,"_34":20,"_36":303,"_24":25,"_142":-5,"_204":304,"_27":305},{"_44":293,"_32":160,"_30":258,"_136":168,"_42":43,"_41":294,"_138":60,"_39":295,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_204":296,"_27":297},{"_44":288,"_32":33,"_30":31,"_136":258,"_42":43,"_41":14,"_138":60,"_39":289,"_13":290,"_34":35,"_36":38,"_24":25,"_142":-5,"_204":291,"_27":292},{"_44":280,"_32":281,"_30":282,"_136":258,"_42":43,"_41":283,"_138":60,"_39":284,"_13":162,"_34":35,"_36":285,"_24":25,"_142":-5,"_204":286,"_27":287},{"_44":272,"_32":273,"_30":274,"_136":258,"_42":43,"_41":275,"_138":60,"_39":276,"_13":149,"_34":35,"_36":277,"_24":25,"_142":-5,"_204":278,"_27":279},{"_44":264,"_32":265,"_30":266,"_136":258,"_42":43,"_41":267,"_138":60,"_39":268,"_13":162,"_34":35,"_36":269,"_24":25,"_142":-5,"_204":270,"_27":271},{"_44":256,"_32":214,"_30":257,"_136":258,"_42":43,"_41":259,"_138":60,"_39":260,"_13":64,"_34":35,"_36":261,"_24":25,"_142":-5,"_204":262,"_27":263},{"_44":159,"_32":160,"_30":161,"_136":-5,"_42":43,"_41":162,"_138":60,"_39":253,"_13":64,"_34":164,"_36":-5,"_24":25,"_142":-5,"_204":254,"_27":255},{"_44":245,"_32":246,"_30":247,"_136":161,"_42":43,"_41":248,"_138":60,"_39":249,"_13":149,"_34":35,"_36":250,"_24":25,"_142":-5,"_204":251,"_27":252},{"_44":237,"_32":238,"_30":239,"_136":161,"_42":43,"_41":240,"_138":60,"_39":241,"_13":64,"_34":35,"_36":242,"_24":25,"_142":-5,"_204":243,"_27":244},{"_44":229,"_32":230,"_30":231,"_136":161,"_42":43,"_41":232,"_138":60,"_39":233,"_13":162,"_34":35,"_36":234,"_24":25,"_142":-5,"_204":235,"_27":236},{"_44":221,"_32":222,"_30":223,"_136":161,"_42":43,"_41":224,"_138":60,"_39":225,"_13":64,"_34":35,"_36":226,"_24":25,"_142":-5,"_204":227,"_27":228},{"_44":213,"_32":214,"_30":215,"_136":161,"_42":43,"_41":216,"_138":60,"_39":217,"_13":64,"_34":35,"_36":218,"_24":25,"_142":-5,"_204":219,"_27":220},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":210,"_13":64,"_34":20,"_36":157,"_24":25,"_142":-5,"_204":211,"_27":212},{"_44":144,"_32":145,"_30":146,"_136":-5,"_42":43,"_41":147,"_138":60,"_39":207,"_13":149,"_34":20,"_36":150,"_24":25,"_142":-5,"_204":208,"_27":209},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":203,"_13":64,"_34":140,"_36":141,"_24":25,"_142":46,"_204":205,"_27":206},["D",1788547341597],"children",[],[135],["D",1788989641384],[],[145],["D",1788547342502],[],[153],"42d79446-33b6-4a60-a68e-95a7ad0474f0","types.ts","5d97eabc-a890-11f1-8788-1607ee4eb77e",18,["D",1788547342234],"export type DemoSlug = \"lightbox\" | \"cratewalk\";\n\nexport type FeedMode = \"images\" | \"posts\";\n\nexport type DemoConfig = {\n slug: DemoSlug;\n appName: string;\n tagline: string;\n mode: FeedMode;\n frontendDir: string;\n};\n\nexport type FeedChoice = {\n id: string;\n uri: string;\n name: string;\n kind: \"timeline\" | \"feed\";\n};\n\nexport type FeedImage = {\n url: string;\n thumb: string;\n alt: string;\n};\n\nexport type FeedPost = {\n uri: string;\n cid: string;\n author: {\n did: string;\n handle: string;\n displayName: string;\n avatar?: string;\n };\n text: string;\n createdAt: string;\n images: FeedImage[];\n videoThumb?: string;\n};\n\nexport type EmbedView = {\n $type?: string;\n images?: Array<{ thumb?: string; fullsize?: string; alt?: string }>;\n thumbnail?: string;\n media?: EmbedView;\n};\n",[],[160,214],"6e39264d-8630-45fc-9ef2-b33f0a7cf789","resolve-handle.ts","5d7ed19e-a890-11f1-b541-1607ee4eb77e",16,["D",1788547342188],"const PROFILE =\n \"https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile\";\n\nexport async function handleFromHint(hint: string): Promise {\n const trimmed = hint.trim().replace(/^@/, \"\");\n if (!trimmed) throw new Error(\"Enter a handle or DID\");\n if (!trimmed.startsWith(\"did:\")) return trimmed;\n\n const res = await fetch(`${PROFILE}?actor=${encodeURIComponent(trimmed)}`);\n if (!res.ok) throw new Error(\"Could not resolve that account\");\n const profile = (await res.json()) as { handle?: unknown };\n if (typeof profile.handle !== \"string\" || !profile.handle) {\n throw new Error(\"Could not resolve that account\");\n }\n return profile.handle;\n}\n",[],[160,222],"0a0489c6-f0cb-4c72-b5b1-35cc522b39ab","oauth.ts","5d6e439c-a890-11f1-86ef-1607ee4eb77e",28,["D",1788989642702],"import { createATProtoOAuth } from \"jsr:@tijs/atproto-oauth@2.10.3\";\nimport { SQLiteStorage, sqliteAdapter } from \"jsr:@tijs/atproto-storage@1.3.2\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst storage = new SQLiteStorage(sqliteAdapter(sqlite));\nconst cache = new Map>();\n\nexport function cookieSecretHelp(): string {\n try {\n const val = parseVal(import.meta.url);\n return `https://www.val.town/x/${val.username}/${val.name}/environment-variables?key=COOKIE_SECRET`;\n } catch {\n return \"https://www.val.town/settings\";\n }\n}\n\nexport function requireCookieSecret(): string {\n const secret = Deno.env.get(\"COOKIE_SECRET\") ?? \"\";\n if (secret.length < 32) {\n throw new Error(\n `COOKIE_SECRET must be at least 32 characters. Add it here: ${cookieSecretHelp()}`,\n );\n }\n return secret;\n}\n\nexport function asHttpsOrigin(value: string, fallback = \"\"): string {\n const trimmed = value.trim().replace(/\\/$/, \"\");\n if (!trimmed) return fallback;\n if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n return `https://${trimmed}`;\n}\n\nexport function publicBaseUrl(request: Request): string {\n return asHttpsOrigin(Deno.env.get(\"PUBLIC_BASE_URL\") ?? \"\", new URL(request.url).origin);\n}\n\nexport function loggedinOrigin(): string {\n return asHttpsOrigin(\n Deno.env.get(\"LOGGEDIN_ORIGIN\") ?? \"\",\n \"https://loggedin-fyi.polished-bird-a3ae.workers.dev\",\n );\n}\n\nexport function sisterAppUrl(): string {\n return asHttpsOrigin(Deno.env.get(\"SISTER_APP_URL\") ?? \"\");\n}\n\nexport function oauthFor(request: Request, appName: string) {\n const baseUrl = publicBaseUrl(request);\n const key = `${baseUrl}:${appName}`;\n const cached = cache.get(key);\n if (cached) return cached;\n\n const oauth = createATProtoOAuth({\n baseUrl,\n appName,\n cookieSecret: requireCookieSecret(),\n storage,\n sessionTtl: 60 * 60 * 24 * 14,\n });\n cache.set(key, oauth);\n return oauth;\n}\n\nexport function applySessionCookie(response: Response, setCookieHeader?: string): Response {\n if (!setCookieHeader) return response;\n const headers = new Headers(response.headers);\n headers.set(\"Set-Cookie\", setCookieHeader);\n return new Response(response.body, { status: response.status, headers });\n}\n",[],[160,230],"4c30415f-f36b-4356-8a3c-8a6f5a7dd753","feed.ts","5d85a488-a890-11f1-938e-1607ee4eb77e",17,["D",1788547342287],"import type { EmbedView, FeedChoice, FeedImage, FeedPost } from \"./types.ts\";\n\nconst APPVIEW = \"did:web:api.bsky.app#bsky_appview\";\n\nexport type SessionLike = {\n did: string;\n handle?: string;\n pdsUrl: string;\n makeRequest: (method: string, url: string, options?: RequestInit) => Promise;\n};\n\ntype FeedViewPost = {\n post?: {\n uri?: string;\n cid?: string;\n author?: {\n did?: string;\n handle?: string;\n displayName?: string;\n avatar?: string;\n };\n record?: { text?: string; createdAt?: string };\n embed?: EmbedView;\n };\n};\n\nexport function imagesFromEmbed(embed?: EmbedView): FeedImage[] {\n if (!embed) return [];\n if (embed.$type === \"app.bsky.embed.images#view\" && Array.isArray(embed.images)) {\n return embed.images\n .map((image) => {\n const url = image.fullsize || image.thumb || \"\";\n if (!url) return null;\n return {\n url,\n thumb: image.thumb || url,\n alt: image.alt || \"\",\n };\n })\n .filter((image): image is FeedImage => image !== null);\n }\n if (embed.$type === \"app.bsky.embed.recordWithMedia#view\") {\n return imagesFromEmbed(embed.media);\n }\n return [];\n}\n\nexport function videoThumbFromEmbed(embed?: EmbedView): string | undefined {\n if (!embed) return undefined;\n if (embed.$type === \"app.bsky.embed.video#view\" && typeof embed.thumbnail === \"string\") {\n return embed.thumbnail;\n }\n if (embed.$type === \"app.bsky.embed.recordWithMedia#view\") {\n return videoThumbFromEmbed(embed.media);\n }\n return undefined;\n}\n\nexport function mapFeedPost(row: FeedViewPost): FeedPost | null {\n const post = row.post;\n if (!post?.uri || !post.cid || !post.author?.did || !post.author.handle) return null;\n return {\n uri: post.uri,\n cid: post.cid,\n author: {\n did: post.author.did,\n handle: post.author.handle,\n displayName: post.author.displayName || post.author.handle,\n avatar: post.author.avatar,\n },\n text: typeof post.record?.text === \"string\" ? post.record.text : \"\",\n createdAt: typeof post.record?.createdAt === \"string\" ? post.record.createdAt : \"\",\n images: imagesFromEmbed(post.embed),\n videoThumb: videoThumbFromEmbed(post.embed),\n };\n}\n\nexport async function xrpc(\n session: SessionLike,\n nsid: string,\n params: Record = {},\n): Promise {\n const query = new URLSearchParams();\n for (const [key, value] of Object.entries(params)) {\n if (value) query.set(key, value);\n }\n const url = `${session.pdsUrl}/xrpc/${nsid}${query.size ? `?${query}` : \"\"}`;\n const proxied = await session.makeRequest(\"GET\", url, {\n headers: { \"atproto-proxy\": APPVIEW },\n });\n if (proxied.ok) return (await proxied.json()) as T;\n const retry = await session.makeRequest(\"GET\", url);\n if (!retry.ok) {\n const body = await retry.text();\n throw new Error(body || `XRPC ${nsid} failed (${retry.status})`);\n }\n return (await retry.json()) as T;\n}\n\ntype PreferencesResponse = {\n preferences?: Array<{ $type?: string; items?: Array<{ type?: string; value?: string; pinned?: boolean }> }>;\n};\n\ntype GeneratorsResponse = {\n feeds?: Array<{ uri?: string; displayName?: string }>;\n};\n\ntype SuggestedResponse = {\n feeds?: Array<{ uri?: string; displayName?: string }>;\n};\n\ntype FeedResponse = {\n feed?: FeedViewPost[];\n};\n\nexport async function listFeeds(session: SessionLike): Promise {\n const feeds: FeedChoice[] = [\n { id: \"following\", uri: \"following\", name: \"Following\", kind: \"timeline\" },\n ];\n const seen = new Set([\"following\"]);\n\n try {\n const prefs = await xrpc(session, \"app.bsky.actor.getPreferences\");\n const saved = prefs.preferences?.find((pref) => pref.$type === \"app.bsky.actor.defs#savedFeedsPrefV2\");\n const uris = (saved?.items ?? [])\n .filter((item) => item.type === \"feed\" && typeof item.value === \"string\")\n .map((item) => item.value as string);\n if (uris.length) {\n const named = await listGenerators(session, uris);\n for (const feed of named) {\n if (seen.has(feed.uri)) continue;\n seen.add(feed.uri);\n feeds.push(feed);\n }\n }\n } catch {\n // Saved feeds are optional; Following still works.\n }\n\n try {\n const suggested = await xrpc(session, \"app.bsky.feed.getSuggestedFeeds\", {\n limit: \"12\",\n });\n for (const feed of suggested.feeds ?? []) {\n if (!feed.uri || seen.has(feed.uri)) continue;\n seen.add(feed.uri);\n feeds.push({\n id: feed.uri,\n uri: feed.uri,\n name: feed.displayName || \"Feed\",\n kind: \"feed\",\n });\n }\n } catch {\n // Suggested feeds are optional.\n }\n\n return feeds;\n}\n\nasync function listGenerators(session: SessionLike, uris: string[]): Promise {\n const url = new URL(`${session.pdsUrl}/xrpc/app.bsky.feed.getFeedGenerators`);\n for (const uri of uris) url.searchParams.append(\"feeds\", uri);\n const proxied = await session.makeRequest(\"GET\", url.toString(), {\n headers: { \"atproto-proxy\": APPVIEW },\n });\n const res = proxied.ok ? proxied : await session.makeRequest(\"GET\", url.toString());\n if (!res.ok) return uris.map((uri) => ({ id: uri, uri, name: \"Saved feed\", kind: \"feed\" as const }));\n const body = (await res.json()) as GeneratorsResponse;\n const byUri = new Map((body.feeds ?? []).map((feed) => [feed.uri, feed.displayName]));\n return uris.map((uri) => ({\n id: uri,\n uri,\n name: byUri.get(uri) || \"Saved feed\",\n kind: \"feed\",\n }));\n}\n\nexport async function loadFeed(session: SessionLike, feedId: string): Promise {\n const data = feedId === \"following\" || !feedId\n ? await xrpc(session, \"app.bsky.feed.getTimeline\", { limit: \"50\" })\n : await xrpc(session, \"app.bsky.feed.getFeed\", { feed: feedId, limit: \"50\" });\n return (data.feed ?? []).map(mapFeedPost).filter((post): post is FeedPost => post !== null);\n}\n",[],[160,238],"2a7a20ca-6a72-4c9d-9195-b1c6201bacad","create-app.ts","5db3a716-a890-11f1-8a0a-1607ee4eb77e",27,["D",1788989641974],"import { Hono } from \"npm:hono@4.11.9\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport {\n applySessionCookie,\n loggedinOrigin,\n oauthFor,\n publicBaseUrl,\n requireCookieSecret,\n sisterAppUrl,\n} from \"./oauth.ts\";\nimport { handleFromHint } from \"./resolve-handle.ts\";\nimport { listFeeds, loadFeed } from \"./feed.ts\";\nimport type { DemoConfig } from \"./types.ts\";\n\nexport function createDemoApp(config: DemoConfig) {\n const app = new Hono();\n app.onError((err) => Promise.reject(err));\n app.use(async (c, next) => {\n try {\n requireCookieSecret();\n } catch (err) {\n return c.text(err instanceof Error ? err.message : \"COOKIE_SECRET is missing\", 500);\n }\n return next();\n });\n\n app.get(\"/oauth-client-metadata.json\", (c) => oauthFor(c.req.raw, config.appName).handleClientMetadata());\n app.get(\"/oauth/callback\", (c) => oauthFor(c.req.raw, config.appName).handleCallback(c.req.raw));\n app.post(\"/api/auth/logout\", (c) => oauthFor(c.req.raw, config.appName).handleLogout(c.req.raw));\n\n app.get(\"/login\", async (c) => {\n const hint = (c.req.query(\"handle\") ?? \"\").trim();\n if (!hint) return c.text(\"Enter a Bluesky handle or DID\", 400);\n try {\n const handle = await handleFromHint(hint);\n const url = new URL(c.req.url);\n url.searchParams.set(\"handle\", handle);\n return oauthFor(c.req.raw, config.appName).handleLogin(new Request(url, c.req.raw));\n } catch (err) {\n return c.text(err instanceof Error ? err.message : \"Could not start login\", 400);\n }\n });\n\n app.get(\"/api/config\", (c) =>\n c.json({\n slug: config.slug,\n appName: config.appName,\n tagline: config.tagline,\n mode: config.mode,\n loggedinOrigin: loggedinOrigin(),\n sisterAppUrl: sisterAppUrl(),\n origin: publicBaseUrl(c.req.raw),\n }),\n );\n\n app.get(\"/api/auth/session\", async (c) => {\n const oauth = oauthFor(c.req.raw, config.appName);\n const { session, setCookieHeader } = await oauth.getSessionFromRequest(c.req.raw);\n if (!session) return c.json({ authenticated: false });\n return applySessionCookie(\n c.json({\n authenticated: true,\n did: session.did,\n handle: session.handle ?? session.did,\n }),\n setCookieHeader,\n );\n });\n\n app.get(\"/api/feeds\", async (c) => {\n const oauth = oauthFor(c.req.raw, config.appName);\n const { session, setCookieHeader, error } = await oauth.getSessionFromRequest(c.req.raw);\n if (!session) return c.json({ error: error?.message || \"Not authenticated\" }, 401);\n try {\n const feeds = await listFeeds(session);\n return applySessionCookie(c.json({ feeds }), setCookieHeader);\n } catch (err) {\n return applySessionCookie(\n c.json({ error: err instanceof Error ? err.message : \"Could not load feeds\" }, 502),\n setCookieHeader,\n );\n }\n });\n\n app.get(\"/api/feed\", async (c) => {\n const oauth = oauthFor(c.req.raw, config.appName);\n const { session, setCookieHeader, error } = await oauth.getSessionFromRequest(c.req.raw);\n if (!session) return c.json({ error: error?.message || \"Not authenticated\" }, 401);\n const feedId = c.req.query(\"feed\") || \"following\";\n try {\n const posts = await loadFeed(session, feedId);\n if (config.mode === \"images\") {\n const images = posts.flatMap((post) =>\n post.images.map((image) => ({\n ...image,\n postUri: post.uri,\n author: post.author,\n text: post.text,\n })),\n );\n return applySessionCookie(c.json({ images }), setCookieHeader);\n }\n return applySessionCookie(c.json({ posts }), setCookieHeader);\n } catch (err) {\n return applySessionCookie(\n c.json({ error: err instanceof Error ? err.message : \"Could not load feed\" }, 502),\n setCookieHeader,\n );\n }\n });\n\n app.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n app.get(\"/\", () => serveFile(`${config.frontendDir}/index.html`));\n app.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n return app;\n}\n",[],[160,246],["D",1788547340451],[195,196,197,198,199],[160],"91a374e8-8532-44ee-be4a-7160d0011094","5d64d00a-a890-11f1-b541-1607ee4eb77e","5cea8fc0-a890-11f1-8a9f-1607ee4eb77e",14,["D",1788547341869],"export type DemoSlug = \"lightbox\" | \"cratewalk\";\n\nexport type AppConfig = {\n slug: DemoSlug;\n appName: string;\n tagline: string;\n mode: \"images\" | \"posts\";\n loggedinOrigin: string;\n sisterAppUrl: string;\n origin: string;\n};\n\nexport type Session = {\n authenticated: boolean;\n did?: string;\n handle?: string;\n};\n\nexport type FeedChoice = {\n id: string;\n uri: string;\n name: string;\n kind: \"timeline\" | \"feed\";\n};\n\nexport type FeedImage = {\n url: string;\n thumb: string;\n alt: string;\n postUri?: string;\n text?: string;\n author?: {\n did: string;\n handle: string;\n displayName: string;\n avatar?: string;\n };\n};\n\nexport type FeedPost = {\n uri: string;\n cid: string;\n author: {\n did: string;\n handle: string;\n displayName: string;\n avatar?: string;\n };\n text: string;\n createdAt: string;\n images: FeedImage[];\n videoThumb?: string;\n};\n\nexport type HintedAccount = {\n did: string;\n origins?: string[];\n handle?: string;\n displayName?: string;\n};\n",[],[167,160,214],"40a03ed2-5c73-4e96-9828-9f4abee1a504","loggedin.ts","5d462e5c-a890-11f1-8b81-1607ee4eb77e",34,["D",1788990345575],"import type { HintedAccount } from \"./types.ts\";\n\ntype EmbedHandlers = {\n onReady?: () => void;\n onUnavailable?: () => void;\n onNeedsAccess?: () => void;\n onPopup?: () => void;\n onAccounts?: (accounts: HintedAccount[], origin: string) => void;\n onPicked?: (did: string) => void;\n onSaved?: (did: string, action: string) => void;\n};\n\ntype LoggedinApi = {\n renderAccountList: (\n el: HTMLElement,\n accounts: HintedAccount[],\n options: {\n originLabels?: Record;\n onPick?: (did: string, handle: string) => void;\n },\n ) => Promise;\n prepareEmbed: (iframe: HTMLIFrameElement) => HTMLIFrameElement;\n listenToEmbed: (iframe: HTMLIFrameElement, handlers: EmbedHandlers) => void;\n mountEmbed: (iframe: HTMLIFrameElement, src: string, handlers: EmbedHandlers) => void;\n listenForPicked: (loggedinOrigin: string, onPicked: (did: string) => void) => void;\n heartbeat: (iframe: HTMLIFrameElement, did: string, targetOrigin: string) => void;\n logout: (iframe: HTMLIFrameElement, did: string, targetOrigin: string) => void;\n enrollUrl: (loggedinOrigin: string, did: string, returnUrl: string) => string;\n saveUrl: (loggedinOrigin: string, did: string, origin: string, action?: string) => string;\n};\n\ndeclare global {\n interface Window {\n Loggedin?: LoggedinApi;\n }\n}\n\nexport async function loadLoggedinRenderer(loggedinOrigin: string): Promise {\n if (window.Loggedin) return window.Loggedin;\n await new Promise((resolve, reject) => {\n const script = document.createElement(\"script\");\n script.src = `${loggedinOrigin}/example-renderer.js`;\n script.onload = () => resolve();\n script.onerror = () => reject(new Error(\"Could not load loggedin.fyi renderer\"));\n document.head.appendChild(script);\n });\n if (!window.Loggedin) throw new Error(\"loggedin.fyi renderer missing\");\n return window.Loggedin;\n}\n\nexport async function loadOriginLabels(loggedinOrigin: string): Promise> {\n try {\n const res = await fetch(`${loggedinOrigin}/allowlist`);\n const data = (await res.json()) as { origins?: Array<{ origin: string; name: string }> };\n const labels: Record = {};\n for (const row of data.origins ?? []) labels[row.origin] = row.name;\n return labels;\n } catch {\n return {};\n }\n}\n",[],[167,160,265],"15929419-9fc6-44a4-8c49-caacc8866443","api.ts","5d36bec2-a890-11f1-973a-1607ee4eb77e",35,["D",1788992312844],"import type { AppConfig, FeedChoice, FeedImage, FeedPost, Session } from \"./types.ts\";\n\nexport async function loadConfig(): Promise {\n const res = await fetch(\"/api/config\", { credentials: \"include\" });\n if (!res.ok) throw new Error(\"Could not load app config\");\n return await res.json();\n}\n\nexport async function loadSession(): Promise {\n const res = await fetch(\"/api/auth/session\", { credentials: \"include\" });\n if (!res.ok) return { authenticated: false };\n return await res.json();\n}\n\nexport async function logout(): Promise {\n await fetch(\"/api/auth/logout\", { method: \"POST\", credentials: \"include\" });\n}\n\nexport function loginUrl(handle: string): string {\n return `/login?handle=${encodeURIComponent(handle.trim())}`;\n}\n\nconst TYPEAHEAD = \"https://typeahead.waow.tech/xrpc/tech.waow.typeahead.searchActors\";\n\nexport type TypeaheadActor = {\n did: string;\n handle: string;\n displayName?: string;\n avatar?: string;\n};\n\nexport function typeaheadQuery(raw: string): string | null {\n const q = raw.trim().replace(/^@+/, \"\");\n if (q.length < 2 || q.toLowerCase().startsWith(\"did:\")) return null;\n return q;\n}\n\nexport function typeaheadClient(origin: string): string {\n try {\n return new URL(origin).host || origin;\n } catch {\n return origin || \"loggedin-demo\";\n }\n}\n\nexport async function searchActors(\n q: string,\n client: string,\n signal?: AbortSignal,\n): Promise {\n const url = new URL(TYPEAHEAD);\n url.searchParams.set(\"q\", q);\n url.searchParams.set(\"limit\", \"8\");\n const res = await fetch(url, {\n signal,\n headers: { \"X-Client\": client },\n });\n if (!res.ok) return [];\n const data = (await res.json()) as { actors?: TypeaheadActor[] };\n return Array.isArray(data.actors) ? data.actors.filter((a) => a?.did && a?.handle) : [];\n}\n\nexport async function loadFeeds(): Promise {\n const res = await fetch(\"/api/feeds\", { credentials: \"include\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Could not load feeds\");\n return data.feeds ?? [];\n}\n\nexport async function loadImages(feed: string): Promise {\n const res = await fetch(`/api/feed?feed=${encodeURIComponent(feed)}`, { credentials: \"include\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Could not load images\");\n return data.images ?? [];\n}\n\nexport async function loadPosts(feed: string): Promise {\n const res = await fetch(`/api/feed?feed=${encodeURIComponent(feed)}`, { credentials: \"include\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Could not load posts\");\n return data.posts ?? [];\n}\n",[],[167,160,273],"9cdc2d61-691f-4820-86e2-4fbbeb42f6b6","SessionBar.tsx","5d5e327c-a890-11f1-b8d0-1607ee4eb77e",38,["D",1789084522434],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AppConfig, FeedChoice, Session } from \"./types.ts\";\nimport { logout } from \"./api.ts\";\nimport { loadLoggedinRenderer } from \"./loggedin.ts\";\n\ntype Props = {\n config: AppConfig;\n session: Session;\n feeds: FeedChoice[];\n feedId: string;\n onFeed: (id: string) => void;\n};\n\ntype RememberPhase = \"ask\" | \"saving\" | \"needs-access\" | \"done\" | \"skipped\" | \"unavailable\";\n\nexport function SessionBar({ config, session, feeds, feedId, onFeed }: Props) {\n const iframeRef = useRef(null);\n const optedInRef = useRef(false);\n const needsAccessRef = useRef(false);\n const [phase, setPhase] = useState(\"ask\");\n const [showEmbed, setShowEmbed] = useState(false);\n const crate = config.slug === \"cratewalk\";\n const sisterName = crate ? \"Lightbox\" : \"Cratewalk\";\n\n useEffect(() => {\n const iframe = iframeRef.current;\n const did = session.did;\n if (!iframe || !did) return;\n\n let cancelled = false;\n optedInRef.current = false;\n needsAccessRef.current = false;\n\n (async () => {\n try {\n const Loggedin = await loadLoggedinRenderer(config.loggedinOrigin);\n Loggedin.mountEmbed(iframe, `${config.loggedinOrigin}/embed`, {\n onReady: () => {\n if (cancelled || !optedInRef.current) return;\n Loggedin.heartbeat(iframe, did, config.loggedinOrigin);\n setPhase(\"saving\");\n },\n onNeedsAccess: () => {\n if (cancelled) return;\n needsAccessRef.current = true;\n if (!optedInRef.current) return;\n setShowEmbed(true);\n setPhase(\"needs-access\");\n },\n onPopup: () => {\n if (cancelled || !optedInRef.current) return;\n Loggedin.heartbeat(iframe, did, config.loggedinOrigin);\n setPhase(\"saving\");\n },\n onUnavailable: () => {\n if (cancelled || !optedInRef.current) return;\n setPhase((current) => (current === \"skipped\" || current === \"done\" ? current : \"unavailable\"));\n },\n onSaved: () => {\n if (cancelled) return;\n setShowEmbed(false);\n setPhase(\"done\");\n },\n onAccounts: (accounts) => {\n if (cancelled) return;\n if (accounts.some((account) => account.did === did)) {\n setShowEmbed(false);\n setPhase(\"done\");\n }\n },\n });\n } catch {\n if (!cancelled) setPhase(\"unavailable\");\n }\n })();\n\n return () => {\n cancelled = true;\n iframe.removeAttribute(\"src\");\n };\n }, [config.loggedinOrigin, session.did]);\n\n function remember() {\n const iframe = iframeRef.current;\n if (!iframe || !session.did || !window.Loggedin) {\n setPhase(\"unavailable\");\n return;\n }\n optedInRef.current = true;\n if (needsAccessRef.current) {\n setShowEmbed(true);\n setPhase(\"needs-access\");\n return;\n }\n setPhase(\"saving\");\n window.Loggedin.heartbeat(iframe, session.did, config.loggedinOrigin);\n }\n\n async function onLogout() {\n const iframe = iframeRef.current;\n if (iframe && session.did && window.Loggedin) {\n window.Loggedin.logout(iframe, session.did, config.loggedinOrigin);\n }\n await logout();\n location.href = \"/\";\n }\n\n const showPrompt = phase === \"ask\" || phase === \"saving\" || phase === \"needs-access\" || phase === \"unavailable\";\n\n return (\n \n

\n \n {crate ? \"Demo B · Cratewalk\" : \"Demo A · Lightbox\"}\n

\n {config.appName}\n

\n \n Feed\n onFeed(event.target.value)}\n className={\n crate\n ? \"ml-2 border-4 border-black bg-[#fff6df] px-2 py-1 font-mono text-xs\"\n : \"ml-2 rounded-md border border-[#4a4336] bg-[#0e0c0a] px-2 py-1 text-sm text-[#f6efe2]\"\n }\n >\n {feeds.map((feed) => (\n \n ))}\n \n \n

\n {session.handle}\n

\n \n Log out\n \n {config.sisterAppUrl ? (\n \n {crate ? \"Open Lightbox\" : \"Open Cratewalk\"}\n \n ) : null}\n\n {showPrompt ? (\n \n

\n {phase === \"needs-access\"\n ? \"Allow access to remember this account\"\n : phase === \"saving\"\n ? \"Remembering this account…\"\n : phase === \"unavailable\"\n ? \"This browser couldn’t remember the account automatically\"\n : \"Remember this account across the Atmosphere?\"}\n

\n {phase === \"needs-access\"\n ? \"Continue below so other apps on this device can offer to sign you in.\"\n : phase === \"saving\"\n ? \"This only stays on this device, and you can forget it anytime by logging out.\"\n : phase === \"unavailable\"\n ? \"You can try again, or skip for now.\"\n : `Other apps on this device — like ${sisterName} — can offer to sign you in with ${session.handle}.`}\n

\n {phase === \"ask\" || phase === \"unavailable\" ? (\n

\n \n Remember Me\n \n {\n setShowEmbed(false);\n setPhase(\"skipped\");\n }}\n className={\n crate\n ? \"border-4 border-black bg-[#fff6df] px-3 py-1.5 font-mono text-[11px] uppercase text-[#1b1208]\"\n : \"rounded-full border border-[#4a4336] px-3.5 py-1.5 text-xs text-[#b8ad96]\"\n }\n >\n Not Now\n \n

\n ) : null}\n

\n ) : null}\n\n \n \n );\n}\n",[],[167,160,281],"fe19fd13-33b0-42f0-a7bd-22d962308143",["D",1789084523402],6,[],[167,160,33],"84583909-fbbf-4b58-b543-c68dbf27ed26",5,["D",1788547341265],[189,190,191,192,193],[167,160],"e75cb7b9-56ee-4cff-9911-42957c0a3c5d","index.html","5d14c5e2-a890-11f1-8788-1607ee4eb77e","5ca8cd4c-a890-11f1-8a0a-1607ee4eb77e",["D",1788547341505],"\n\n \n \n \n Cratewalk — loggedin.fyi demo B\n \n \n \n \n \n

\n \n \n\n",[],[167,306,299],"cratewalk","48bf1242-0ac8-4092-9e35-1b26365640fe","app.tsx","5d25d77e-a890-11f1-bd21-1607ee4eb77e",8,["D",1788547341610],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { loadConfig, loadFeeds, loadPosts, loadSession } from \"../shared/api.ts\";\nimport { LoginScreen } from \"../shared/LoginScreen.tsx\";\nimport { SessionBar } from \"../shared/SessionBar.tsx\";\nimport type { AppConfig, FeedChoice, FeedPost, Session } from \"../shared/types.ts\";\nimport { Conveyor } from \"./Conveyor.tsx\";\n\nfunction App() {\n const [config, setConfig] = useState(null);\n const [session, setSession] = useState(null);\n const [feeds, setFeeds] = useState([]);\n const [feedId, setFeedId] = useState(\"following\");\n const [posts, setPosts] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n Promise.all([loadConfig(), loadSession()])\n .then(([nextConfig, nextSession]) => {\n setConfig(nextConfig);\n setSession(nextSession);\n })\n .catch((err) => setError(err instanceof Error ? err.message : \"Failed to start\"));\n }, []);\n\n useEffect(() => {\n if (!session?.authenticated) return;\n loadFeeds()\n .then((next) => {\n setFeeds(next);\n if (!next.some((feed) => feed.id === feedId) && next[0]) setFeedId(next[0].id);\n })\n .catch((err) => setError(err instanceof Error ? err.message : \"Could not list feeds\"));\n }, [session?.authenticated]);\n\n useEffect(() => {\n if (!session?.authenticated) return;\n setLoading(true);\n setError(\"\");\n loadPosts(feedId)\n .then(setPosts)\n .catch((err) => setError(err instanceof Error ? err.message : \"Could not load posts\"))\n .finally(() => setLoading(false));\n }, [session?.authenticated, feedId]);\n\n if (!config || !session) {\n return

{error || \"Booting the belt…\"}

;\n }\n if (!session.authenticated) return ;\n\n return (\n

\n \n \n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[167,306,308],"efd8bd86-4cb0-4e30-ab34-62468cae2195","Conveyor.tsx","5d2ddef6-a890-11f1-8a9f-1607ee4eb77e",9,["D",1788547341539],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { FeedPost } from \"../shared/types.ts\";\n\ntype Phase =\n | { kind: \"empty\" }\n | { kind: \"travel\"; post: FeedPost; index: number; displayed?: FeedPost }\n | { kind: \"open\"; post: FeedPost; index: number }\n | { kind: \"show\"; post: FeedPost; index: number };\n\ntype Props = {\n posts: FeedPost[];\n loading: boolean;\n error: string;\n};\n\nexport function Conveyor({ posts, loading, error }: Props) {\n const [phase, setPhase] = useState({ kind: \"empty\" });\n\n useEffect(() => {\n if (!posts.length) {\n setPhase({ kind: \"empty\" });\n return;\n }\n setPhase({ kind: \"travel\", post: posts[0], index: 0 });\n }, [posts]);\n\n useEffect(() => {\n if (phase.kind === \"travel\") {\n const id = window.setTimeout(() => setPhase({ kind: \"open\", post: phase.post, index: phase.index }), 3200);\n return () => window.clearTimeout(id);\n }\n if (phase.kind === \"open\") {\n const id = window.setTimeout(() => setPhase({ kind: \"show\", post: phase.post, index: phase.index }), 700);\n return () => window.clearTimeout(id);\n }\n if (phase.kind === \"show\") {\n const next = posts[phase.index + 1];\n if (!next) return;\n const id = window.setTimeout(() => {\n setPhase({ kind: \"travel\", post: next, index: phase.index + 1, displayed: phase.post });\n }, 2200);\n return () => window.clearTimeout(id);\n }\n }, [phase, posts]);\n\n if (loading) {\n return

Waiting on the loading dock…

;\n }\n if (error) {\n return

{error}

;\n }\n\n const incoming = phase.kind === \"travel\" || phase.kind === \"open\" ? phase.post : null;\n const opened = phase.kind === \"show\" || phase.kind === \"open\"\n ? phase.post\n : phase.kind === \"travel\"\n ? phase.displayed\n : null;\n const leaving = phase.kind === \"open\" && phase.index > 0 ? posts[phase.index - 1] : null;\n\n return (\n

\n\n

\n {opened ? (\n \n \n

\n ) : null}\n {leaving ? (\n

\n \n

\n ) : null}\n

\n {incoming ? (\n \n \n

\n ) : null}\n {phase.kind === \"show\" ? (\n

\n \n

\n ) : null}\n {!posts.length ? (\n

\n No parcels on this belt.\n

\n ) : null}\n

\n );\n}\n\nfunction CardboardBox({ open }: { open: boolean }) {\n return (\n

\n );\n}\n\nfunction PostParcel({ post }: { post: FeedPost }) {\n return (\n

\n {post.author.avatar ? (\n $\"\"$ \n ) : (\n \n )}\n

\n {post.author.displayName}\n @{post.author.handle}\n

\n {post.text ? (\n

\n {post.text.length > 180 ? `${post.text.slice(0, 180)}…` : post.text}\n

\n ) : null}\n

\n {post.images.map((image) => (\n \n ))}\n {post.videoThumb ? (\n

\n \n \n VIDEO\n \n

\n ) : null}\n

\n );\n}\n",[],[167,306,316],"0b1ee69a-0d4c-4ddb-a3db-3d95ad7d7e2f",["D",1788547340754],[185,186,187],[167,306],["D",1788547340133],[184,188],[167],["D",1788547090141],["D",1789512647429],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":56,"_104":105,"_106":25},{"_13":14,"_32":90,"_44":43,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":46,"_98":99},"ctx",{"_83":-5,"_126":368,"_369":370,"_371":372,"_373":25,"_374":25,"_375":25,"_376":60,"_377":-5,"_378":-7,"_379":-7,"_380":64,"_381":25,"_382":25,"_383":-5,"_384":25,"_385":25,"_386":25,"_387":-5},"ENV",{"_339":340,"_341":342,"_343":90,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v39