\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],"fe19fd13-33b0-42f0-a7bd-22d962308143","LoginScreen.tsx","5d54f32e-a890-11f1-8a9f-1607ee4eb77e",["D",1789084523402],6,"/** @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],"84583909-fbbf-4b58-b543-c68dbf27ed26","5c3ec1fe-a890-11f1-b0a0-1607ee4eb77e",5,["D",1788547341265],[181,182,183,184,185],[270,163],"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",[],[270,317,310],"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",[],[270,317,319],"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",[],[270,317,327],"0b1ee69a-0d4c-4ddb-a3db-3d95ad7d7e2f",["D",1788547340754],[177,178,179],[270,317],"74d5a19b-2a66-4a58-b1ec-825a51819753",2,["D",1788547340133],[176,180],[270],["D",1788547090141],["D",1789512647429],{"_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