[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_338":339,"_340":341},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_252":-5,"_20":253,"_22":254,"_255":256,"_257":258,"_26":259,"_24":260,"_261":-5,"_262":-5,"_263":57,"_264":265,"_266":48,"_267":-5,"_268":-5,"_269":270},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","stevekrouse","name","cooper-hewitt-explorer","branchName","main","version","path","frontend","project",{"_36":195,"_13":14,"_49":196,"_197":-5,"_198":57,"_199":200,"_201":200,"_202":203,"_204":-5,"_205":206,"_207":84,"_208":48,"_209":-5,"_210":-5,"_211":51,"_212":213,"_214":215,"_216":217,"_218":219,"_220":-5,"_221":222,"_223":222,"_224":225,"_226":225,"_227":225,"_228":222,"_229":222,"_230":231,"_232":233,"_234":235,"_236":57},"tree",[78,79,80,81],"file",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":75,"_47":48,"_49":76,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":77},"contents",[33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":73},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":66},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":59},"id","c4b72410-3e7d-11f1-80c7-42b51c65c3df","index.tsx","fileId","c4b724d8-3e7d-11f1-80c7-42b51c65c3df","parentId","a7619dc8-3e7d-11f1-8acc-42b51c65c3df","branchId","9915891e-3e7d-11f1-a1aa-42b51c65c3df","branchVersion",8,"latest",true,"createdAt",["D",1776884531723],0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n","deleted",false,"label",[19,38],"c34ca942-3e7d-11f1-80c7-42b51c65c3df","index.html","c34caa1e-3e7d-11f1-80c7-42b51c65c3df",7,["D",1776884529348],"\n\n\n \n \n Cooper Hewitt Inspiration Explorer\n \n \n \n \n\n\n

\n \n\n\n",[19,61],"c4f06c16-3e7d-11f1-80c7-42b51c65c3df","components","c4f06cf2-3e7d-11f1-80c7-42b51c65c3df",9,["D",1776884532100],"directory",[19,68],"a7619d00-3e7d-11f1-8acc-42b51c65c3df",3,["D",1776884482516],[19],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":75,"_47":48,"_49":126,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":127,"_18":128},{"_36":101,"_13":102,"_39":103,"_41":-5,"_43":44,"_45":104,"_47":48,"_49":105,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":106,"_18":107},{"_36":93,"_13":94,"_39":95,"_41":-5,"_43":44,"_45":96,"_47":48,"_49":97,"_17":51,"_52":24,"_54":98,"_56":57,"_58":-5,"_90":99,"_18":100},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":87,"_52":88,"_54":89,"_56":57,"_58":-5,"_90":91,"_18":92},"b9537614-3e7d-11f1-b939-42b51c65c3df","main.tsx","991979fc-3e7d-11f1-a1aa-42b51c65c3df",6,["D",1776884512605],4,"http","import { Hono } from \"npm:hono\";\nimport { serveFile, readFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Full stack traces for debugging\napp.onError((err, c) => {\n console.error(\"Server error:\", err);\n throw err;\n});\n\nconst CH_ENDPOINT = \"https://api.cooperhewitt.org/\";\n\n// Proxy GraphQL query to Cooper Hewitt\nasync function chQuery(query: string): Promise {\n const url = `${CH_ENDPOINT}?query=${encodeURIComponent(query)}`;\n const res = await fetch(url);\n if (!res.ok) {\n const body = await res.text();\n throw new Error(`Cooper Hewitt API error ${res.status}: ${body}`);\n }\n return res.json();\n}\n\n// Search / browse objects\n// Query params:\n// q: general full-text search\n// title, maker, medium, country, period, year\n// yearFrom, yearTo\n// page (0-indexed), size (default 24)\n// sort (asc|desc, on year)\napp.get(\"/api/objects\", async (c) => {\n const q = c.req.query();\n const args: string[] = [\"hasImages:true\"];\n\n if (q.q) args.push(`general:\"${escapeGql(q.q)}\"`);\n if (q.title) args.push(`title:\"${escapeGql(q.title)}\"`);\n if (q.maker) args.push(`maker:\"${escapeGql(q.maker)}\"`);\n if (q.medium) args.push(`material:\"${escapeGql(q.medium)}\"`);\n if (q.country) args.push(`country:\"${escapeGql(q.country)}\"`);\n if (q.period) args.push(`period:\"${escapeGql(q.period)}\"`);\n if (q.department) args.push(`department:\"${escapeGql(q.department)}\"`);\n if (q.year) args.push(`year:${Number(q.year)}`);\n if (q.yearFrom || q.yearTo) {\n const parts: string[] = [];\n if (q.yearFrom) parts.push(`from:${Number(q.yearFrom)}`);\n if (q.yearTo) parts.push(`to:${Number(q.yearTo)}`);\n args.push(`yearRange:{${parts.join(\",\")}}`);\n }\n\n const size = Math.min(Number(q.size || 24), 100);\n const page = Number(q.page || 0);\n args.push(`size:${size}`);\n args.push(`page:${page}`);\n\n if (q.sort === \"asc\" || q.sort === \"desc\") {\n args.push(`sort:[{year:\"${q.sort}\"}]`);\n }\n\n const query = `{\n object(${args.join(\", \")}) {\n id\n summary\n multimedia\n date\n medium\n department\n classification\n maker { id summary }\n }\n }`;\n\n try {\n const data = await chQuery(query);\n // Extract pagination from extensions\n const pagination = data?.extensions?.pagination || null;\n return c.json({\n objects: data?.data?.object || [],\n pagination,\n errors: data?.errors,\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Get a single object by id (e.g. object-1234)\napp.get(\"/api/object/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const query = `{\n object(id:\"${escapeGql(id)}\") {\n id\n summary\n title\n description\n identifier\n classification\n culture\n date\n department\n exhibition\n inscription\n geography\n legal\n location\n material\n medium\n measurements\n multimedia\n name\n period\n provenance\n status\n maker { id summary }\n collector { id summary }\n subject { id summary }\n tag { id summary }\n }\n }`;\n try {\n const data = await chQuery(query);\n return c.json({\n object: data?.data?.object?.[0] || null,\n errors: data?.errors,\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// \"Random\" / surprise-me: picks a random page of objects with images\napp.get(\"/api/random\", async (c) => {\n // Pick a random page of the ~155k objects w/ images. 155784 / 24 ≈ 6491 pages.\n const randomPage = Math.floor(Math.random() * 6000);\n const query = `{\n object(hasImages:true, size:24, page:${randomPage}) {\n id summary multimedia date medium department classification\n maker { id summary }\n }\n }`;\n try {\n const data = await chQuery(query);\n return c.json({\n objects: data?.data?.object || [],\n pagination: data?.extensions?.pagination || null,\n page: randomPage,\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Pass-through for raw GraphQL (handy for power users)\napp.post(\"/api/graphql\", async (c) => {\n const body = await c.req.json();\n if (typeof body?.query !== \"string\") {\n return c.json({ error: \"missing query\" }, 400);\n }\n try {\n const data = await chQuery(body.query);\n return c.json(data);\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve frontend assets\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction escapeGql(s: string): string {\n // Basic escaping for values in GraphQL arg strings\n return String(s).replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, '\\\\\"');\n}\n\nexport default app.fetch;\n","children",[],[83],"20dd8cf2-3e7e-11f1-a245-42b51c65c3df","README.md","20dd8df6-3e7e-11f1-a245-42b51c65c3df",19,["D",1776884686327],"# Cooper Hewitt Inspiration Explorer\n\nA visual, masonry-grid browser for the Cooper Hewitt, Smithsonian Design Museum collection — 215,000+ objects of design history to scroll through for inspiration.\n\nBuilt on top of the museum's public [GraphQL API](https://apidocs.cooperhewitt.org/).\n\n## Features\n\n- 🖼 **Masonry gallery** of objects with images\n- 🔎 **Full-text search** + filters (maker, medium, country, department, year range, sort)\n- 🎲 **\"Surprise me\"** pulls a random slice of the collection when you don't know what you're looking for\n- 🏷 **Quick presets** — Chairs, Posters, Textiles, Art Nouveau, Bauhaus, Japan, 1960s, …\n- 🔍 **Detail modal** with full description, multiple images, maker info, credit line, and deep-link to the Cooper Hewitt website\n- ♾ **Infinite scroll** while searching\n- 🔗 URL-backed: every search state is a shareable link (`?q=chair&yearFrom=1900`), and every object detail has a hash route (`#/object/object-5773`)\n\n## Architecture\n\n```mermaid\nflowchart LR\n U[Browser] --> F[React SPA]\n F -->|/api/objects, /api/object, /api/random| H[Hono backend]\n H -->|GraphQL query| CH[api.cooperhewitt.org]\n CH -->|JSON| H\n H --> F\n```\n\n### Files\n\n- `main.tsx` — Hono HTTP entrypoint. Serves `/`, static assets, and proxies the GraphQL API at `/api/*`.\n- `frontend/index.html` — HTML shell with Twind + custom masonry CSS\n- `frontend/index.tsx` — React bootstrap\n- `frontend/components/`\n - `App.tsx` — top-level state, URL sync, infinite scroll, hash-routed modal\n - `Header.tsx` — title + \"Surprise me\" button\n - `SearchBar.tsx` — search field, filter panel, preset chips\n - `Gallery.tsx` — masonry layout + `IntersectionObserver` sentinel\n - `Card.tsx` — individual object tile\n - `ObjectDetail.tsx` — modal with gallery, metadata, and external links\n- `shared/types.ts` — TS types shared between client and server\n- `shared/helpers.ts` — formatting helpers (title, maker, date, image selection)\n\n### API endpoints\n\n- `GET /api/objects?q=&maker=&medium=&country=&department=&yearFrom=&yearTo=&sort=&page=&size=` — search\n- `GET /api/object/:id` — detail for one object (e.g. `object-5773`)\n- `GET /api/random` — a random page of objects with images\n- `POST /api/graphql` — raw GraphQL passthrough (body: `{ \"query\": \"…\" }`)\n\n## Attribution\n\nAll images and metadata © Cooper Hewitt, Smithsonian Design Museum. Many objects are licensed CC0 — see each object's detail page for its licensing status.\n",[],[94],"c543c00a-3e7d-11f1-80c7-42b51c65c3df","shared","c543c0be-3e7d-11f1-80c7-42b51c65c3df",10,["D",1776884532648],[108,109],[102],{"_36":118,"_13":119,"_39":120,"_41":103,"_43":44,"_45":121,"_47":48,"_49":122,"_17":51,"_52":53,"_54":123,"_56":57,"_58":-5,"_90":124,"_18":125},{"_36":110,"_13":111,"_39":112,"_41":103,"_43":44,"_45":113,"_47":48,"_49":114,"_17":51,"_52":53,"_54":115,"_56":57,"_58":-5,"_90":116,"_18":117},"cca0cbfe-3e7d-11f1-80c7-42b51c65c3df","types.ts","cca0ccda-3e7d-11f1-80c7-42b51c65c3df",11,["D",1776884544997],"// Shared TS types describing the (trimmed) Cooper Hewitt shape our UI uses.\n\nexport interface MediaArtifact {\n url?: string;\n format?: string;\n measurements?: {\n dimensions?: Array<{ dimension: string; units: string; value: number }>;\n };\n}\n\nexport interface Media {\n id?: string;\n type?: string; // \"image\" | \"video\" | ...\n cc0?: boolean;\n preview?: MediaArtifact;\n large?: MediaArtifact;\n original?: MediaArtifact;\n}\n\nexport interface AgentRef {\n id?: string;\n summary?: { title?: string };\n}\n\nexport interface Obj {\n id: string;\n summary?: { title?: string };\n title?: Array<{ type?: string; value: string }>;\n description?: Array<{ type?: string; value: string }>;\n date?: Array<{ from?: string; to?: string; value?: string }>;\n medium?: Array<{ value?: string }>;\n material?: Array<{ value?: string }>;\n department?: Array<{ summary?: { title?: string }; id?: string }>;\n classification?: Array<{ summary?: { title?: string }; id?: string }>;\n maker?: AgentRef[] | null;\n collector?: AgentRef[] | null;\n subject?: AgentRef[] | null;\n tag?: AgentRef[] | null;\n multimedia?: Media[];\n geography?: { country?: { value?: string }; city?: { value?: string }; name?: string };\n measurements?: { dimensions?: Array<{ value?: string }> };\n inscription?: Array<{ markings?: string }>;\n legal?: { credit?: string; rights?: Array<{ type?: string; details?: string; holder?: string }> };\n period?: any;\n provenance?: string[] | null;\n identifier?: Array<{ type?: string; value: string }>;\n}\n\nexport interface Pagination {\n hits: number;\n per_page: number;\n current_page: number;\n number_of_pages: number;\n}\n\nexport interface ObjectsResponse {\n objects: Obj[];\n pagination: Pagination | null;\n error?: string;\n}\n\nexport interface SearchParams {\n q?: string;\n maker?: string;\n medium?: string;\n country?: string;\n department?: string;\n yearFrom?: string;\n yearTo?: string;\n page?: number;\n size?: number;\n sort?: \"asc\" | \"desc\" | \"\";\n}\n",[],[102,111],"d2273d9c-3e7d-11f1-9774-42b51c65c3df","helpers.ts","d2273e3c-3e7d-11f1-9774-42b51c65c3df",12,["D",1776884554271],"import type { Media, Obj } from \"./types.ts\";\n\nexport function getTitle(obj: Obj): string {\n return obj.summary?.title || obj.title?.[0]?.value || \"Untitled\";\n}\n\nexport function getDate(obj: Obj): string {\n const d = obj.date?.[0];\n if (!d) return \"\";\n if (d.value) return d.value;\n if (d.from && d.to) return d.from === d.to ? d.from : `${d.from}–${d.to}`;\n return d.from || d.to || \"\";\n}\n\nexport function getMaker(obj: Obj): string {\n if (!obj.maker || obj.maker.length === 0) return \"\";\n // Dedup by title\n const seen = new Set();\n const names: string[] = [];\n for (const m of obj.maker) {\n const t = m?.summary?.title;\n if (t && !seen.has(t)) {\n seen.add(t);\n names.push(t);\n }\n }\n return names.join(\", \");\n}\n\nexport function getMedium(obj: Obj): string {\n return (obj.medium || []).map((m) => m.value).filter(Boolean).join(\", \");\n}\n\nexport function getDepartment(obj: Obj): string {\n return obj.department?.[0]?.summary?.title || \"\";\n}\n\nexport function getClassification(obj: Obj): string {\n return obj.classification?.[0]?.summary?.title || \"\";\n}\n\n// Pick the first image with a URL (prefer preview, then large, then original).\nexport function primaryImage(obj: Obj, size: \"preview\" | \"large\" | \"original\" = \"preview\"): string | null {\n const media = (obj.multimedia || []).filter((m) => m && m.type === \"image\");\n for (const m of media) {\n const url = m[size]?.url || m.large?.url || m.preview?.url || m.original?.url;\n if (url) return url;\n }\n return null;\n}\n\nexport function imageAspect(m: Media, size: \"preview\" | \"large\" = \"preview\"): number | null {\n const dims = m?.[size]?.measurements?.dimensions;\n if (!dims) return null;\n const h = dims.find((d) => d.dimension === \"height\")?.value;\n const w = dims.find((d) => d.dimension === \"width\")?.value;\n if (!h || !w) return null;\n return w / h;\n}\n\nexport function allImages(obj: Obj): Media[] {\n return (obj.multimedia || []).filter((m) => m && m.type === \"image\" && (m.preview?.url || m.large?.url));\n}\n\n// Cooper Hewitt public object page\nexport function chPublicUrl(objectId: string): string {\n // objectId looks like \"object-5773\" → 5773\n const numeric = objectId.replace(/^object-/, \"\");\n return `https://collection.cooperhewitt.org/objects/${numeric}/`;\n}\n",[],[102,119],["D",1776884482516],[129,130,131],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":138,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":139,"_18":140},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":135,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_90":136,"_18":137},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":132,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_90":133,"_18":134},["D",1776884531723],[],[19,38],["D",1776884529348],[],[19,61],["D",1776884532100],[141,142,143,144,145,146],[19,68],{"_36":187,"_13":188,"_39":189,"_41":69,"_43":44,"_45":190,"_47":48,"_49":191,"_17":51,"_52":53,"_54":192,"_56":57,"_58":-5,"_90":193,"_18":194},{"_36":179,"_13":180,"_39":181,"_41":69,"_43":44,"_45":182,"_47":48,"_49":183,"_17":51,"_52":53,"_54":184,"_56":57,"_58":-5,"_90":185,"_18":186},{"_36":171,"_13":172,"_39":173,"_41":69,"_43":44,"_45":174,"_47":48,"_49":175,"_17":51,"_52":53,"_54":176,"_56":57,"_58":-5,"_90":177,"_18":178},{"_36":163,"_13":164,"_39":165,"_41":69,"_43":44,"_45":166,"_47":48,"_49":167,"_17":51,"_52":53,"_54":168,"_56":57,"_58":-5,"_90":169,"_18":170},{"_36":155,"_13":156,"_39":157,"_41":69,"_43":44,"_45":158,"_47":48,"_49":159,"_17":51,"_52":53,"_54":160,"_56":57,"_58":-5,"_90":161,"_18":162},{"_36":147,"_13":148,"_39":149,"_41":69,"_43":44,"_45":150,"_47":48,"_49":151,"_17":51,"_52":53,"_54":152,"_56":57,"_58":-5,"_90":153,"_18":154},"f31a61be-3e7d-11f1-a69b-42b51c65c3df","SearchBar.tsx","f31a629a-3e7d-11f1-a69b-42b51c65c3df",15,["D",1776884609550],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { SearchParams } from \"../../shared/types.ts\";\n\nconst PRESETS: Array<{ label: string; params: SearchParams }> = [\n { label: \"Chairs\", params: { q: \"chair\" } },\n { label: \"Posters\", params: { q: \"poster\" } },\n { label: \"Textiles\", params: { department: \"Textiles\" } },\n { label: \"Drawings\", params: { q: \"drawing\" } },\n { label: \"Wallpaper\", params: { department: \"Wallcoverings\" } },\n { label: \"Teapots\", params: { q: \"teapot\" } },\n { label: \"Art Nouveau\", params: { q: \"art nouveau\" } },\n { label: \"Bauhaus\", params: { q: \"bauhaus\" } },\n { label: \"Japan\", params: { country: \"Japan\" } },\n { label: \"1920s\", params: { yearFrom: \"1920\", yearTo: \"1929\" } },\n { label: \"1960s\", params: { yearFrom: \"1960\", yearTo: \"1969\" } },\n];\n\nexport function SearchBar({\n params,\n setParams,\n hits,\n loading,\n mode,\n}: {\n params: SearchParams;\n setParams: (p: SearchParams) => void;\n hits: number | null;\n loading: boolean;\n mode: \"search\" | \"random\";\n}) {\n const [showFilters, setShowFilters] = useState(false);\n\n const update = (patch: Partial) => {\n setParams({ ...params, ...patch });\n };\n\n const clear = () => setParams({});\n\n return (\n

\n update({ q: e.target.value })}\n placeholder=\"Search: “peacock”, “thonet”, “swivel chair”, “blue”…\"\n className=\"w-full px-4 py-3 pl-10 border border-stone-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-stone-400 text-base\"\n />\n \n

\n setShowFilters((s) => !s)}\n className={`px-4 py-3 rounded-md border text-sm transition-colors ${\n showFilters ? \"bg-stone-900 text-stone-50 border-stone-900\" : \"bg-white text-stone-700 border-stone-300 hover:bg-stone-100\"\n }`}\n >\n ⚙ Filters\n \n {(params.q || Object.keys(params).length > 0) && (\n \n Clear\n \n )}\n

\n\n {/* Presets */}\n

\n {PRESETS.map((p) => (\n setParams(p.params)}\n className=\"px-3 py-1 text-xs border border-stone-300 rounded-full bg-white hover:bg-stone-100 text-stone-700\"\n >\n {p.label}\n \n ))}\n

\n\n {showFilters && (\n

\n \n Maker\n update({ maker: e.target.value })}\n placeholder=\"e.g. Frank Lloyd Wright\"\n />\n \n \n Medium / material\n update({ medium: e.target.value })}\n placeholder=\"silk, porcelain, glass…\"\n />\n \n \n Country\n update({ country: e.target.value })}\n placeholder=\"France, Japan, USA…\"\n />\n \n \n Department\n update({ department: e.target.value })}\n >\n \n \n \n \n \n \n \n \n Year from\n update({ yearFrom: e.target.value })}\n placeholder=\"e.g. 1900\"\n />\n \n \n Year to\n update({ yearTo: e.target.value })}\n placeholder=\"e.g. 1950\"\n />\n \n \n Sort by year\n update({ sort: e.target.value as any })}\n >\n \n \n \n \n \n

\n )}\n\n

\n {loading\n ? \"Loading…\"\n : mode === \"random\"\n ? \"A random slice of the collection. Refresh with “Surprise me”, or search above.\"\n : hits !== null\n ? `~${hits.toLocaleString()} objects with images`\n : \"\"}\n

\n );\n}\n",[],[19,68,148],"0ca4f0ea-3e7e-11f1-936b-42b51c65c3df","ObjectDetail.tsx","0ca4f1a8-3e7e-11f1-936b-42b51c65c3df",18,["D",1776884652377],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Obj } from \"../../shared/types.ts\";\nimport {\n allImages,\n chPublicUrl,\n getDate,\n getDepartment,\n getMaker,\n getMedium,\n getTitle,\n} from \"../../shared/helpers.ts\";\n\nexport function ObjectDetail({\n id,\n onClose,\n onOpen,\n}: {\n id: string;\n onClose: () => void;\n onOpen: (id: string) => void;\n}) {\n const [obj, setObj] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [activeIdx, setActiveIdx] = useState(0);\n\n useEffect(() => {\n let cancelled = false;\n setLoading(true);\n setError(null);\n setObj(null);\n setActiveIdx(0);\n fetch(`/api/object/${encodeURIComponent(id)}`)\n .then((r) => r.json())\n .then((data) => {\n if (cancelled) return;\n if (data.error) setError(data.error);\n else setObj(data.object);\n })\n .catch((e) => {\n if (!cancelled) setError(String(e));\n })\n .finally(() => {\n if (!cancelled) setLoading(false);\n });\n return () => {\n cancelled = true;\n };\n }, [id]);\n\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") onClose();\n };\n window.addEventListener(\"keydown\", onKey);\n document.body.style.overflow = \"hidden\";\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n document.body.style.overflow = \"\";\n };\n }, [onClose]);\n\n const images = obj ? allImages(obj) : [];\n const active = images[activeIdx];\n const activeUrl = active?.large?.url || active?.original?.url || active?.preview?.url;\n\n const title = obj ? getTitle(obj) : \"…\";\n const maker = obj ? getMaker(obj) : \"\";\n const date = obj ? getDate(obj) : \"\";\n const medium = obj ? getMedium(obj) : \"\";\n const dept = obj ? getDepartment(obj) : \"\";\n\n const accession = obj?.identifier?.find((i) => i.type === \"accession number\")?.value;\n const credit = obj?.legal?.credit;\n const country = obj?.geography?.country?.value;\n const city = obj?.geography?.city?.value;\n\n const descriptions = (obj?.description || []).filter((d) => d?.value);\n const tags = (obj?.tag || []).map((t) => t?.summary?.title).filter(Boolean) as string[];\n\n return (\n \n \n e.stopPropagation()}\n >\n

\n {accession && #{accession} · }\n {dept || \"Cooper Hewitt\"}\n

\n \n ×\n \n

\n\n {loading &&

Loading…

}\n {error &&

{error}

}\n\n {obj && (\n

\n {/* Image column */}\n

\n {activeUrl ? (\n \n ) : (\n

No image

\n )}\n

\n {images.length > 1 && (\n

\n {images.map((m, i) => (\n setActiveIdx(i)}\n className={`flex-shrink-0 w-16 h-16 rounded overflow-hidden border-2 ${\n i === activeIdx ? \"border-stone-50\" : \"border-transparent opacity-70 hover:opacity-100\"\n }`}\n >\n \n \n ))}\n

\n )}\n

\n\n {/* Info column */}\n

{title}

\n {maker &&

Maker · {maker}

}\n {date &&

Date · {date}

}\n {medium &&

Medium · {medium}

}\n {(country || city) && (\n

\n Origin · \n {[city, country].filter(Boolean).join(\", \")}\n

\n )}\n {obj.measurements?.dimensions?.[0]?.value && (\n

\n Dimensions · \n {obj.measurements.dimensions[0].value}\n

\n )}\n

\n\n {descriptions.length > 0 && (\n

\n {descriptions.map((d, i) => (\n

\n {d.value}\n

\n ))}\n

\n )}\n\n {tags.length > 0 && (\n

Cooper Hewitt Inspiration Explorer

Browse 215,000+ objects from the Smithsonian Design Museum

\n \n 🎲 Surprise me\n \n

\n );\n}\n",[],[19,68,164],"f72af958-3e7d-11f1-b939-42b51c65c3df","Gallery.tsx","f72afa34-3e7d-11f1-b939-42b51c65c3df",16,["D",1776884616371],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Obj } from \"../../shared/types.ts\";\nimport { Card } from \"./Card.tsx\";\n\nexport function Gallery({\n objects,\n onSelect,\n loading,\n onReachEnd,\n loadingMore,\n mode,\n}: {\n objects: Obj[];\n onSelect: (id: string) => void;\n loading: boolean;\n onReachEnd: () => void;\n loadingMore: boolean;\n mode: \"search\" | \"random\";\n}) {\n const sentinelRef = useRef(null);\n\n // Infinite scroll (search mode only; random just loads one batch)\n useEffect(() => {\n if (mode !== \"search\") return;\n const el = sentinelRef.current;\n if (!el) return;\n const io = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) onReachEnd();\n }\n },\n { rootMargin: \"600px\" },\n );\n io.observe(el);\n return () => io.disconnect();\n }, [onReachEnd, mode]);\n\n if (loading && objects.length === 0) {\n return ;\n }\n\n return (\n <>\n

\n {objects.map((obj, i) => (\n onSelect(obj.id)} />\n ))}\n

\n {loadingMore && (\n

Loading more…

\n )}\n \n );\n}\n\nfunction SkeletonGrid() {\n return (\n

\n {Array.from({ length: 12 }).map((_, i) => {\n const h = 200 + ((i * 37) % 240);\n return (\n \n );\n })}\n

\n );\n}\n",[],[19,68,172],"fae2c080-3e7d-11f1-80c7-42b51c65c3df","Card.tsx","fae2c13e-3e7d-11f1-80c7-42b51c65c3df",17,["D",1776884622608],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Obj } from \"../../shared/types.ts\";\nimport { getDate, getMaker, getTitle, primaryImage } from \"../../shared/helpers.ts\";\n\nexport function Card({ obj, onClick }: { obj: Obj; onClick: () => void }) {\n const src = primaryImage(obj, \"preview\") || primaryImage(obj, \"large\");\n if (!src) return null;\n\n const title = getTitle(obj);\n const maker = getMaker(obj);\n const date = getDate(obj);\n\n return (\n \n

\n {\n (e.target as HTMLImageElement).closest(\"button\")?.classList.add(\"hidden\");\n }}\n />\n

\n {title}\n

\n {(maker || date) && (\n

\n {maker || \"—\"}\n {date && {date}}\n

\n )}\n

\n \n );\n}\n",[],[19,68,180],"e1a6ef9c-3e7d-11f1-b939-42b51c65c3df","App.tsx","e1a6f050-3e7d-11f1-b939-42b51c65c3df",13,["D",1776884580233],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Obj, ObjectsResponse, SearchParams } from \"../../shared/types.ts\";\nimport { Header } from \"./Header.tsx\";\nimport { SearchBar } from \"./SearchBar.tsx\";\nimport { Gallery } from \"./Gallery.tsx\";\nimport { ObjectDetail } from \"./ObjectDetail.tsx\";\n\nexport function App() {\n const [params, setParams] = useState(() => parseUrlParams());\n const [objects, setObjects] = useState([]);\n const [hits, setHits] = useState(null);\n const [page, setPage] = useState(0);\n const [loading, setLoading] = useState(false);\n const [loadingMore, setLoadingMore] = useState(false);\n const [error, setError] = useState(null);\n const [selectedId, setSelectedId] = useState(null);\n const [mode, setMode] = useState<\"search\" | \"random\">(() => params.q || anyFilter(params) ? \"search\" : \"random\");\n\n const seqRef = useRef(0);\n\n // Perform a fresh search whenever params change (debounced)\n useEffect(() => {\n const isSearch = params.q || anyFilter(params);\n setMode(isSearch ? \"search\" : \"random\");\n updateUrl(params);\n const mySeq = ++seqRef.current;\n setLoading(true);\n setError(null);\n setPage(0);\n const timer = setTimeout(async () => {\n try {\n const data = isSearch\n ? await fetchObjects({ ...params, page: 0, size: 24 })\n : await fetchRandom();\n if (seqRef.current !== mySeq) return;\n setObjects(data.objects);\n setHits(data.pagination?.hits ?? null);\n } catch (e) {\n if (seqRef.current !== mySeq) return;\n setError(String(e));\n } finally {\n if (seqRef.current === mySeq) setLoading(false);\n }\n }, 250);\n return () => clearTimeout(timer);\n }, [JSON.stringify(params)]);\n\n const loadMore = useCallback(async () => {\n if (loadingMore || loading) return;\n setLoadingMore(true);\n try {\n const next = page + 1;\n const data = mode === \"search\"\n ? await fetchObjects({ ...params, page: next, size: 24 })\n : await fetchRandom();\n setObjects((prev) => {\n // Filter out duplicates by id\n const ids = new Set(prev.map((o) => o.id));\n const newOnes = data.objects.filter((o) => !ids.has(o.id));\n return [...prev, ...newOnes];\n });\n setPage(next);\n } catch (e) {\n setError(String(e));\n } finally {\n setLoadingMore(false);\n }\n }, [page, params, mode, loading, loadingMore]);\n\n const shuffle = useCallback(async () => {\n setParams({});\n setMode(\"random\");\n setLoading(true);\n try {\n const data = await fetchRandom();\n setObjects(data.objects);\n setHits(data.pagination?.hits ?? null);\n setPage(0);\n } catch (e) {\n setError(String(e));\n } finally {\n setLoading(false);\n }\n }, []);\n\n // Listen for popstate / hash for object detail modal\n useEffect(() => {\n const onHash = () => {\n const h = window.location.hash;\n const m = h.match(/^#\\/object\\/(object-\\d+)/);\n setSelectedId(m ? m[1] : null);\n };\n onHash();\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n\n const openObject = (id: string) => {\n window.location.hash = `/object/${id}`;\n };\n const closeObject = () => {\n if (window.location.hash.startsWith(\"#/object/\")) {\n history.pushState(\"\", document.title, window.location.pathname + window.location.search);\n setSelectedId(null);\n }\n };\n\n return (\n

\n \n\n {error && (\n

\n {error}\n

\n )}\n\n \n\n {!loading && objects.length === 0 && !error && (\n

\n No objects found. Try a different search.\n

\n )}\n\n \n

\n\n {selectedId && (\n \n )}\n

\n );\n}\n\nfunction anyFilter(p: SearchParams): boolean {\n return !!(p.q || p.maker || p.medium || p.country || p.department || p.yearFrom || p.yearTo || p.sort);\n}\n\nfunction parseUrlParams(): SearchParams {\n if (typeof window === \"undefined\") return {};\n const usp = new URLSearchParams(window.location.search);\n const out: SearchParams = {};\n for (const k of [\"q\", \"maker\", \"medium\", \"country\", \"department\", \"yearFrom\", \"yearTo\", \"sort\"] as const) {\n const v = usp.get(k);\n if (v) (out as any)[k] = v;\n }\n return out;\n}\n\nfunction updateUrl(p: SearchParams) {\n const usp = new URLSearchParams();\n for (const [k, v] of Object.entries(p)) {\n if (v) usp.set(k, String(v));\n }\n const qs = usp.toString();\n const url = window.location.pathname + (qs ? \"?\" + qs : \"\") + window.location.hash;\n history.replaceState(null, \"\", url);\n}\n\nasync function fetchObjects(p: SearchParams): Promise {\n const usp = new URLSearchParams();\n for (const [k, v] of Object.entries(p)) {\n if (v !== undefined && v !== null && v !== \"\") usp.set(k, String(v));\n }\n const res = await fetch(`/api/objects?${usp.toString()}`);\n if (!res.ok) throw new Error(`API ${res.status}`);\n return res.json();\n}\n\nasync function fetchRandom(): Promise {\n const res = await fetch(`/api/random`);\n if (!res.ok) throw new Error(`API ${res.status}`);\n return res.json();\n}\n",[],[19,68,188],"9915049e-3e7d-11f1-a1aa-42b51c65c3df",["D",1776884458529],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Visual explorer for Cooper Hewitt design museum collection","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","9915049e3e7d11f1a1aa42b51c65c3df","tursoHostname","9915049e3e7d11f1a1aa42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789514495229],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_251":247},"org",{"_11":12,"_245":-5,"_246":247,"_205":206,"_248":249,"_250":57},"branch",{"_17":96,"_13":16,"_36":44,"_237":195,"_238":-5,"_239":-5,"_240":-5,"_241":-5,"_242":-5,"_243":14,"_244":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":195,"_13":14,"_49":333,"_197":-5,"_198":57,"_199":200,"_201":200,"_202":203,"_204":-5,"_205":206,"_207":84,"_208":48,"_209":-5,"_210":-5,"_211":51,"_212":213,"_214":215,"_216":217,"_218":334,"_220":-5,"_221":222,"_223":222,"_224":225,"_226":225,"_227":225,"_228":222,"_229":222,"_230":335,"_232":336,"_234":337,"_236":57},[288,298,301,302],"files",[288,289,290,291,292,293,294,295,296,297,298,299,300,301,302],"counts",{"_278":51,"_279":280,"_281":51,"_32":282,"_283":284},[272,273,274],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":75,"_47":48,"_49":76,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":271},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":277},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":276},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":275},[19,38],[19,61],[19,68],"pulls","branches",1,"forks",{"_285":51,"_287":51},"connections",{"_285":51,"_286":51},"count","unfilledCount","emptyCount",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":75,"_47":48,"_49":126,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":331,"_18":332},{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":138,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":329,"_18":330},{"_36":187,"_13":188,"_39":189,"_41":69,"_43":44,"_45":190,"_47":48,"_49":191,"_17":51,"_52":53,"_54":192,"_56":57,"_58":-5,"_90":327,"_18":328},{"_36":179,"_13":180,"_39":181,"_41":69,"_43":44,"_45":182,"_47":48,"_49":183,"_17":51,"_52":53,"_54":184,"_56":57,"_58":-5,"_90":325,"_18":326},{"_36":171,"_13":172,"_39":173,"_41":69,"_43":44,"_45":174,"_47":48,"_49":175,"_17":51,"_52":53,"_54":176,"_56":57,"_58":-5,"_90":323,"_18":324},{"_36":163,"_13":164,"_39":165,"_41":69,"_43":44,"_45":166,"_47":48,"_49":167,"_17":51,"_52":53,"_54":168,"_56":57,"_58":-5,"_90":321,"_18":322},{"_36":155,"_13":156,"_39":157,"_41":69,"_43":44,"_45":158,"_47":48,"_49":159,"_17":51,"_52":53,"_54":160,"_56":57,"_58":-5,"_90":319,"_18":320},{"_36":147,"_13":148,"_39":149,"_41":69,"_43":44,"_45":150,"_47":48,"_49":151,"_17":51,"_52":53,"_54":152,"_56":57,"_58":-5,"_90":317,"_18":318},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":135,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_90":315,"_18":316},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":132,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_90":313,"_18":314},{"_36":101,"_13":102,"_39":103,"_41":-5,"_43":44,"_45":104,"_47":48,"_49":105,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_90":311,"_18":312},{"_36":118,"_13":119,"_39":120,"_41":103,"_43":44,"_45":121,"_47":48,"_49":122,"_17":51,"_52":53,"_54":123,"_56":57,"_58":-5,"_90":309,"_18":310},{"_36":110,"_13":111,"_39":112,"_41":103,"_43":44,"_45":113,"_47":48,"_49":114,"_17":51,"_52":53,"_54":115,"_56":57,"_58":-5,"_90":307,"_18":308},{"_36":93,"_13":94,"_39":95,"_41":-5,"_43":44,"_45":96,"_47":48,"_49":97,"_17":51,"_52":24,"_54":98,"_56":57,"_58":-5,"_90":305,"_18":306},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":87,"_52":88,"_54":89,"_56":57,"_58":-5,"_90":303,"_18":304},[],[83],[],[94],[],[102,111],[],[102,119],[299,300],[102],[],[19,38],[],[19,61],[],[19,68,148],[],[19,68,156],[],[19,68,164],[],[19,68,172],[],[19,68,180],[],[19,68,188],[290,291,292,293,294,295],[19,68],[289,296,297],[19],["D",1776884458529],["D",1789514495229],{"_11":12,"_251":247},{"_11":12,"_245":-5,"_246":247,"_205":206,"_248":249,"_250":57},{"_17":96,"_13":16,"_36":44,"_237":195,"_238":-5,"_239":-5,"_240":-5,"_241":-5,"_242":-5,"_243":14,"_244":12},"ctx",{"_230":-5,"_268":371,"_372":373,"_374":375,"_376":57,"_377":57,"_378":57,"_379":48,"_380":-5,"_381":-7,"_382":-7,"_383":51,"_384":57,"_385":57,"_386":-5,"_387":57,"_388":57,"_389":57,"_390":-5},"ENV",{"_342":343,"_344":345,"_346":16,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370},"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"]