\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",[],[270,163,288],"aaf65006-5d7c-4ae9-96a8-d2cdb2a39f87","LoginScreen.tsx","5aa40ee4-a890-11f1-8b81-1607ee4eb77e",["D",1789084521583],10,"/** @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 );\n}\n",[],[270,163,296],"0fb7dbb2-394d-4c49-95f4-8820e16a093e","5936a9cc-a890-11f1-8091-1607ee4eb77e",["D",1788547335524],[181,182,183,184,185],[270,163],"d65165da-6c0b-4518-a9b0-70e1d05e6ba7","index.html","5a179464-a890-11f1-8610-1607ee4eb77e","59a099b8-a890-11f1-9674-1607ee4eb77e",13,["D",1788547336524],"\n\n \n \n \n Lightbox — loggedin.fyi demo A\n \n \n \n \n \n

\n \n \n\n",[],[270,317,309],"lightbox","a150eca2-f3c2-4a27-9aba-77ce7720a976","app.tsx","5a0ff8ee-a890-11f1-9674-1607ee4eb77e",12,["D",1788547336447],"/** @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, loadImages, loadSession } from \"../shared/api.ts\";\nimport { LoginScreen } from \"../shared/LoginScreen.tsx\";\nimport { SessionBar } from \"../shared/SessionBar.tsx\";\nimport type { AppConfig, FeedChoice, FeedImage, Session } from \"../shared/types.ts\";\nimport { Gallery } from \"./Gallery.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 [images, setImages] = 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 loadImages(feedId)\n .then(setImages)\n .catch((err) => setError(err instanceof Error ? err.message : \"Could not load images\"))\n .finally(() => setLoading(false));\n }, [session?.authenticated, feedId]);\n\n if (!config || !session) {\n return

{error || \"Loading Lightbox…\"}

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

\n \n \n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[270,317,319],"c861427e-9fa9-46b9-9984-5989b8811904","Gallery.tsx","59fe1b06-a890-11f1-b541-1607ee4eb77e",["D",1788547336361],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { FeedImage } from \"../shared/types.ts\";\n\ntype Props = {\n images: FeedImage[];\n loading: boolean;\n error: string;\n};\n\nexport function Gallery({ images, loading, error }: Props) {\n const [open, setOpen] = useState(null);\n\n if (loading) {\n return

Pulling stills from this feed…

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

{error}

;\n }\n if (!images.length) {\n return

No images in this feed right now.

;\n }\n\n return (\n

\n {images.map((image, index) => (\n setOpen(image)}\n className=\"block w-full overflow-hidden rounded-sm border border-[#2a241c] bg-[#11100d] text-left\"\n >\n

\n \n @{image.author?.handle ?? \"unknown\"}\n \n \n ))}\n

\n {open ? (\n setOpen(null)}\n >\n

{open.alt — \n @{open.author?.handle}\n {open.text ? ` — ${open.text}` : \"\"}\n

\n ) : null}\n

\n );\n}\n",[],[270,317,327],"5efa9cf6-e63e-45c2-bfbe-f155a0aabb22",5,["D",1788547335732],[177,178,179],[270,317],"6355fea0-16bc-4199-b7af-839c789e1726",2,["D",1788547335057],[176,180],[270],["D",1788546938576],["D",1789543856531],{"_11":12,"_132":70},{"_11":12,"_128":-5,"_69":70,"_30":68,"_129":130,"_131":24},{"_39":119,"_13":16,"_33":36,"_120":80,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":14,"_127":12},"ctx",{"_52":-5,"_151":381,"_382":383,"_384":385,"_386":24,"_387":24,"_388":24,"_389":93,"_390":-5,"_391":-7,"_392":-7,"_393":26,"_394":24,"_395":24,"_396":-5,"_397":24,"_398":24,"_399":24,"_400":-5},"ENV",{"_352":353,"_354":355,"_356":16,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380},"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"]

History · create-app.ts