tag first\n const titleMatch = html.match(/<title[^>]*>([^<]+)<\\/title>/i);\n if (titleMatch) {\n metadata.title = decodeHtmlEntities(titleMatch[1].trim());\n }\n\n // Try og:title as fallback\n if (!metadata.title) {\n const ogTitleMatch = html.match(\n /<meta[^>]+property=[\"']og:title[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (ogTitleMatch) {\n metadata.title = decodeHtmlEntities(ogTitleMatch[1].trim());\n }\n }\n\n // Extract description from meta tags\n const descMatch = html.match(\n /<meta[^>]+name=[\"']description[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (descMatch) {\n metadata.description = decodeHtmlEntities(descMatch[1].trim());\n }\n\n // Try og:description as fallback\n if (!metadata.description) {\n const ogDescMatch = html.match(\n /<meta[^>]+property=[\"']og:description[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (ogDescMatch) {\n metadata.description = decodeHtmlEntities(ogDescMatch[1].trim());\n }\n }\n\n // Extract favicon\n const faviconMatch = html.match(\n /<link[^>]+rel=[\"'](?:icon|shortcut icon)[\"'][^>]+href=[\"']([^\"']+)[\"']/i,\n );\n if (faviconMatch) {\n const faviconUrl = faviconMatch[1];\n // Resolve relative URLs\n metadata.favicon = new URL(faviconUrl, url).href;\n }\n\n // Default to hostname/favicon.ico if no favicon found\n if (!metadata.favicon) {\n metadata.favicon = new URL(\"/favicon.ico\", url.origin).href;\n }\n\n // Use hostname as fallback title\n if (!metadata.title) {\n metadata.title = url.hostname;\n }\n\n return metadata;\n}\n\n/**\n * Decode common HTML entities\n */\nfunction decodeHtmlEntities(text: string): string {\n const entities: Record<string, string> = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n \""\": '\"',\n \"'\": \"'\",\n \"'\": \"'\",\n };\n\n return text.replace(/&[^;]+;/g, (entity) => entities[entity] || entity);\n}\n\n/**\n * Testable function for dependency injection\n */\nexport async function extractUrlMetadataWithFetcher(\n url: string,\n fetcher: typeof fetch = fetch,\n): Promise<UrlMetadata> {\n // This version accepts a custom fetcher for testing\n const originalFetch = globalThis.fetch;\n globalThis.fetch = fetcher;\n try {\n return await extractUrlMetadata(url);\n } finally {\n globalThis.fetch = originalFetch;\n }\n}\n",[],[183,252,258],[183,252],{"_103":266,"_95":267,"_156":268,"_158":184,"_159":137,"_160":136,"_161":162,"_105":269,"_100":32,"_164":270,"_166":271,"_167":22,"_168":272,"_169":273,"_98":274},"b11e6ce0-b1c1-11f0-9e9a-0224a6c84d84","index.ts","019a1c40-a7c9-77ff-b434-1be900573830",["D",1761410590580],"http","import { Hono } from \"https://esm.sh/hono\";\nimport { createATProtoOAuth } from \"jsr:@tijs/atproto-oauth-hono@^0.3.2\";\nimport { DrizzleStorage } from \"jsr:@tijs/atproto-oauth-hono@^0.3.2/drizzle\";\nimport { db, initializeTables } from \"./database/db.ts\";\nimport { staticRoutes } from \"./routes/static.ts\";\nimport { bookmarksApi } from \"./routes/bookmarks.ts\";\nimport { tagsApi } from \"./routes/tags.ts\";\n\n// Run database migrations on startup\nawait initializeTables();\n\n// Create the main app\nconst app = new Hono();\n\n// Get base URL and cookie secret from environment\nconst BASE_URL = Deno.env.get(\"BASE_URL\") ||\n \"https://kipclip-tijs.val.town\";\nconst COOKIE_SECRET = Deno.env.get(\"COOKIE_SECRET\");\n\nif (!COOKIE_SECRET) {\n throw new Error(\"COOKIE_SECRET environment variable is required\");\n}\n\n// Create OAuth integration with DrizzleStorage\nexport const oauth = createATProtoOAuth({\n baseUrl: BASE_URL,\n appName: \"kipclip\",\n cookieSecret: COOKIE_SECRET,\n sessionTtl: 60 * 60 * 24 * 30, // 30 days in seconds\n storage: new DrizzleStorage(db),\n});\n\n// Note: No canonical-host redirect; app runs purely as a standard website\n\n// Mount OAuth routes (provides /login, /oauth/callback, /api/auth/*)\n// @ts-expect-error TS2589: Hono's type inference hits TypeScript's recursion limit with complex nested route types\napp.route(\"/\", oauth.routes);\n\n// Mount bookmarks API (uses oauth.sessions internally)\napp.route(\"/api\", bookmarksApi);\n\n// Mount tags API\napp.route(\"/api\", tagsApi);\n\n// Static file serving and SPA routing\napp.route(\"/\", staticRoutes);\n\n// Error handler - let errors bubble up with full context\napp.onError((err, _c) => {\n console.error(\"Application error:\", err);\n throw err;\n});\n\nexport default app.fetch;\n","bkmrk",[],[183,267],[183],{"_103":277,"_95":278,"_156":279,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":280,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":281,"_98":424},"b11ed090-b1c1-11f0-9e9a-0224a6c84d84","frontend","019a1c40-a7c9-77ff-b434-687fe4f22ad4",["D",1761410590580],[282,385,400,408,416],{"_103":283,"_95":284,"_156":285,"_158":279,"_159":137,"_160":136,"_161":162,"_105":286,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":287,"_98":384},"b11ec168-b1c1-11f0-9e9a-0224a6c84d84","components","019a1c40-a7c9-77ff-b434-5081302a4079",["D",1761410590580],[288,296,304,312,320,328,336,344,352,360,368,376],{"_103":289,"_95":290,"_156":291,"_158":285,"_159":137,"_160":136,"_161":162,"_105":292,"_100":32,"_164":198,"_166":293,"_167":22,"_168":-5,"_169":294,"_98":295},"b11e706e-b1c1-11f0-9e9a-0224a6c84d84","About.tsx","019a1c40-a7c9-77ff-b434-23c348123294",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\n\nexport function About() {\n return (\n <div className=\"min-h-screen bg-gray-50\">\n <header className=\"bg-white shadow-sm\">\n <div className=\"max-w-4xl mx-auto px-4 py-4 flex items-center justify-between\">\n <a href=\"/\" className=\"flex items-center gap-2\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png\"\n alt=\"Kip logo\"\n className=\"w-8 h-8\"\n />\n <h1\n className=\"text-2xl font-bold\"\n style={{ color: \"var(--coral)\" }}\n >\n kipclip\n </h1>\n </a>\n <a\n href=\"/\"\n className=\"text-gray-600 hover:text-gray-800 text-sm font-medium\"\n >\n Back to Bookmarks\n </a>\n </div>\n </header>\n\n <main className=\"max-w-4xl mx-auto px-4 py-12 space-y-8\">\n <section>\n <h2 className=\"text-3xl font-bold text-gray-800 mb-3\">\n About kipclip\n </h2>\n <p className=\"text-gray-700 text-lg\">\n kipclip is a simple, open bookmarks app for the AT Protocol. Save\n links you care about, organize them with tags, and browse them from\n any device.\n </p>\n </section>\n\n <section className=\"bg-white rounded-lg shadow-md p-6 space-y-3\">\n <h3 className=\"text-xl font-bold text-gray-800\">How it works</h3>\n <ul className=\"list-disc pl-5 text-gray-700 space-y-2\">\n <li>\n Your bookmarks are saved as AT Protocol records in your own PDS\n (Personal Data Server) under your account.\n </li>\n <li>\n kipclip uses a community lexicon (schema) so other AT Protocol\n apps can read these records too.\n </li>\n <li>\n The app UI is a lightweight web client; the data lives with you in\n your PDS.\n </li>\n </ul>\n </section>\n\n <section className=\"bg-white rounded-lg shadow-md p-6 space-y-3\">\n <h3 className=\"text-xl font-bold text-gray-800\">\n Important note on privacy\n </h3>\n <p className=\"text-gray-700\">\n AT Protocol records are public by default. That means bookmarks you\n save with kipclip are public and discoverable. Please don’t save\n anything sensitive or private.\n </p>\n </section>\n\n <section className=\"bg-white rounded-lg shadow-md p-6\">\n <h3 className=\"text-xl font-bold text-gray-800 mb-4\">Links</h3>\n <div className=\"flex flex-col sm:flex-row gap-3\">\n <a\n href=\"https://github.com/tijs/kipclip-appview\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-white hover:opacity-95\"\n style={{ backgroundColor: \"var(--coral)\" }}\n >\n <svg\n className=\"w-5 h-5\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden\n >\n <path d=\"M12 .5C5.73.5.94 5.29.94 11.56c0 4.86 3.15 8.98 7.52 10.43.55.1.75-.24.75-.53 0-.26-.01-1.12-.02-2.03-3.06.67-3.71-1.3-3.71-1.3-.5-1.28-1.23-1.63-1.23-1.63-1.01-.69.08-.68.08-.68 1.12.08 1.71 1.15 1.71 1.15.99 1.7 2.6 1.21 3.23.93.1-.72.39-1.21.71-1.49-2.44-.28-5-1.22-5-5.43 0-1.2.43-2.18 1.14-2.95-.11-.28-.5-1.43.11-2.98 0 0 .94-.3 3.07 1.13.89-.25 1.85-.37 2.81-.37.95 0 1.92.12 2.81.37 2.12-1.43 3.06-1.13 3.06-1.13.62 1.55.23 2.7.12 2.98.71.77 1.14 1.75 1.14 2.95 0 4.22-2.57 5.15-5.01 5.42.4.35.76 1.04.76 2.1 0 1.52-.01 2.74-.01 3.12 0 .29.2.64.76.53 4.36-1.45 7.51-5.57 7.51-10.43C23.06 5.29 18.27.5 12 .5z\" />\n </svg>\n GitHub Repository\n </a>\n <a\n href=\"https://ko-fi.com/tijsteulings/tip\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-white hover:opacity-95\"\n style={{ backgroundColor: \"#13C3FF\" }}\n >\n <img\n src=\"https://storage.ko-fi.com/cdn/brandasset/v2/kofi_symbol.png\"\n alt=\"Ko-fi\"\n className=\"w-5 h-5\"\n />\n Support this project\n </a>\n <a\n href=\"https://bsky.app/profile/tijs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-white hover:opacity-95\"\n style={{ backgroundColor: \"#1185FF\" }}\n >\n <span aria-hidden className=\"text-lg\">🦋</span>\n made bij tijs.org\n </a>\n </div>\n </section>\n </main>\n </div>\n );\n}\n",[],[278,284,290],{"_103":297,"_95":298,"_156":299,"_158":285,"_159":137,"_160":136,"_161":162,"_105":300,"_100":32,"_164":198,"_166":301,"_167":22,"_168":-5,"_169":302,"_98":303},"b11e749c-b1c1-11f0-9e9a-0224a6c84d84","AddBookmark.tsx","019a1c40-a7c9-77ff-b434-241e5140662b",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedBookmark } from \"../../shared/types.ts\";\n\ninterface AddBookmarkProps {\n onClose: () => void;\n onBookmarkAdded: (bookmark: EnrichedBookmark) => void;\n}\n\nexport function AddBookmark({ onClose, onBookmarkAdded }: AddBookmarkProps) {\n const [url, setUrl] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!url.trim()) return;\n\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/bookmarks\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ url: url.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to add bookmark\");\n }\n\n const data = await response.json();\n onBookmarkAdded(data.bookmark);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n <div className=\"bg-white rounded-lg max-w-md w-full p-6 fade-in\">\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-xl font-bold text-gray-800\">Add Bookmark</h3>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-gray-400 hover:text-gray-600 text-2xl\"\n disabled={loading}\n >\n ×\n </button>\n </div>\n\n <form onSubmit={handleSubmit} className=\"space-y-4\">\n <div>\n <label\n htmlFor=\"url\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n URL\n </label>\n <input\n type=\"url\"\n id=\"url\"\n value={url}\n onChange={(e) => setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n autoFocus\n required\n />\n </div>\n\n {error && (\n <div className=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm\">\n {error}\n </div>\n )}\n\n <div className=\"flex gap-3\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"flex-1 px-4 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition\"\n disabled={loading}\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 btn-primary disabled:opacity-50\"\n disabled={loading || !url.trim()}\n >\n {loading\n ? (\n <span className=\"flex items-center justify-center gap-2\">\n <div className=\"spinner w-5 h-5 border-2\"></div>\n Adding...\n </span>\n )\n : (\n \"Add Bookmark\"\n )}\n </button>\n </div>\n </form>\n\n <p className=\"text-xs text-gray-500 mt-4 text-center\">\n The page title will be automatically fetched and saved with your\n bookmark\n </p>\n </div>\n </div>\n );\n}\n",[],[278,284,298],{"_103":305,"_95":306,"_156":307,"_158":285,"_159":137,"_160":136,"_161":162,"_105":308,"_100":32,"_164":198,"_166":309,"_167":22,"_168":-5,"_169":310,"_98":311},"b11e77f8-b1c1-11f0-9e9a-0224a6c84d84","AddTag.tsx","019a1c40-a7c9-77ff-b434-29ab6f85a651",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedTag } from \"../../shared/types.ts\";\n\ninterface AddTagProps {\n onClose: () => void;\n onTagAdded: (tag: EnrichedTag) => void;\n}\n\nexport function AddTag({ onClose, onTagAdded }: AddTagProps) {\n const [value, setValue] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!value.trim()) return;\n\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/tags\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ value: value.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to add tag\");\n }\n\n const data = await response.json();\n onTagAdded(data.tag);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n <div className=\"bg-white rounded-lg max-w-md w-full p-6 fade-in\">\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-xl font-bold text-gray-800\">Create Tag</h3>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-gray-400 hover:text-gray-600 text-2xl\"\n disabled={loading}\n >\n ×\n </button>\n </div>\n\n <form onSubmit={handleSubmit} className=\"space-y-4\">\n <div>\n <label\n htmlFor=\"tag-value\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Tag Name\n </label>\n <input\n type=\"text\"\n id=\"tag-value\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder=\"e.g., work, personal, reading\"\n maxLength={64}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n autoFocus\n required\n />\n <p className=\"text-xs text-gray-500 mt-1\">\n {value.length}/64 characters\n </p>\n </div>\n\n {error && (\n <div className=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm\">\n {error}\n </div>\n )}\n\n <div className=\"flex gap-3\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"flex-1 px-4 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition\"\n disabled={loading}\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n className=\"flex-1 btn-primary disabled:opacity-50\"\n disabled={loading || !value.trim()}\n >\n {loading\n ? (\n <span className=\"flex items-center justify-center gap-2\">\n <div className=\"spinner w-5 h-5 border-2\"></div>\n Creating...\n </span>\n )\n : (\n \"Create Tag\"\n )}\n </button>\n </div>\n </form>\n </div>\n </div>\n );\n}\n",[],[278,284,306],{"_103":313,"_95":314,"_156":315,"_158":285,"_159":137,"_160":136,"_161":162,"_105":316,"_100":32,"_164":198,"_166":317,"_167":22,"_168":-5,"_169":318,"_98":319},"b11e7b68-b1c1-11f0-9e9a-0224a6c84d84","App.tsx","019a1c40-a7c9-77ff-b434-2c7fc0aea44a",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useState } from \"https://esm.sh/react\";\nimport { Login } from \"./Login.tsx\";\nimport { BookmarkList } from \"./BookmarkList.tsx\";\nimport { UserMenu } from \"./UserMenu.tsx\";\nimport { TagSidebar } from \"./TagSidebar.tsx\";\nimport { Tools } from \"./Tools.tsx\";\nimport { About } from \"./About.tsx\";\nimport { Save } from \"./Save.tsx\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\nexport function App() {\n const { session, setSession } = useApp();\n const [loading, setLoading] = useState(true);\n const [currentPath, setCurrentPath] = useState(globalThis.location.pathname);\n\n useEffect(() => {\n checkSession();\n\n // Listen for popstate events to update route\n const handlePopState = () => {\n setCurrentPath(globalThis.location.pathname);\n };\n globalThis.addEventListener(\"popstate\", handlePopState);\n return () => globalThis.removeEventListener(\"popstate\", handlePopState);\n }, []);\n\n async function checkSession() {\n try {\n const response = await fetch(\"/api/auth/session\");\n if (response.ok) {\n const data = await response.json();\n setSession({\n did: data.did,\n handle: data.handle,\n });\n }\n } catch (error) {\n console.error(\"Failed to check session:\", error);\n } finally {\n setLoading(false);\n }\n }\n\n async function handleLogout() {\n try {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n setSession(null);\n } catch (error) {\n console.error(\"Failed to logout:\", error);\n }\n }\n\n // Handle special routes that don't require session check\n if (currentPath === \"/tools\") {\n return <Tools />;\n }\n\n if (currentPath === \"/about\") {\n return <About />;\n }\n\n if (currentPath === \"/save\") {\n return <Save />;\n }\n\n if (loading) {\n return (\n <div className=\"flex items-center justify-center min-h-screen\">\n <div className=\"spinner\"></div>\n </div>\n );\n }\n\n if (!session) {\n return <Login />;\n }\n\n return (\n <div className=\"min-h-screen md:h-screen flex flex-col\">\n <header className=\"bg-white shadow-sm flex-shrink-0\">\n <div className=\"px-4 py-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png\"\n alt=\"Kip logo\"\n className=\"w-8 h-8\"\n />\n <h1\n className=\"text-2xl font-bold\"\n style={{ color: \"var(--coral)\" }}\n >\n kipclip\n </h1>\n </div>\n <UserMenu handle={session.handle} onLogout={handleLogout} />\n </div>\n </header>\n\n <div className=\"flex flex-col md:flex-row flex-1 md:overflow-hidden\">\n <TagSidebar />\n <main className=\"flex-1 px-4 py-8 max-w-7xl mx-auto w-full md:overflow-y-auto\">\n <BookmarkList />\n </main>\n </div>\n </div>\n );\n}\n",[],[278,284,314],{"_103":321,"_95":322,"_156":323,"_158":285,"_159":137,"_160":136,"_161":162,"_105":324,"_100":32,"_164":198,"_166":325,"_167":22,"_168":-5,"_169":326,"_98":327},"b11e7f78-b1c1-11f0-9e9a-0224a6c84d84","BookmarkList.tsx","019a1c40-a7c9-77ff-b434-3208bbb7479f",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport { AddBookmark } from \"./AddBookmark.tsx\";\nimport { EditBookmark } from \"./EditBookmark.tsx\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\nexport function BookmarkList() {\n const {\n filteredBookmarks: bookmarks,\n tags: availableTags,\n addBookmark,\n updateBookmark,\n deleteBookmark,\n loadBookmarks: loadBookmarksFromContext,\n loadTags,\n } = useApp();\n\n const [loading, setLoading] = useState(true);\n const [showAddModal, setShowAddModal] = useState(false);\n const [editingBookmark, setEditingBookmark] = useState<any>(null);\n const [error, setError] = useState<string | null>(null);\n const [dragOverBookmark, setDragOverBookmark] = useState<string | null>(null);\n\n // Pull-to-refresh state\n const [pullDistance, setPullDistance] = useState(0);\n const [isPulling, setIsPulling] = useState(false);\n const [isRefreshing, setIsRefreshing] = useState(false);\n const touchStartY = useRef(0);\n\n useEffect(() => {\n loadBookmarks();\n }, []);\n\n // Pull-to-refresh touch handlers\n useEffect(() => {\n function isAtTop(): boolean {\n // Check both window scroll and main element scroll for PWA compatibility\n const mainElement = document.querySelector(\"main\");\n const windowAtTop = globalThis.scrollY === 0;\n const mainAtTop = !mainElement || mainElement.scrollTop === 0;\n return windowAtTop && mainAtTop;\n }\n\n function handleTouchStart(e: TouchEvent) {\n // Only start pull if scrolled to top\n if (isAtTop()) {\n touchStartY.current = e.touches[0].clientY;\n setIsPulling(true);\n }\n }\n\n function handleTouchMove(e: TouchEvent) {\n if (!isPulling || isRefreshing) return;\n\n const touchY = e.touches[0].clientY;\n const distance = touchY - touchStartY.current;\n\n // Only pull down, and limit distance\n if (distance > 0 && isAtTop()) {\n e.preventDefault();\n setPullDistance(Math.min(distance, 120));\n }\n }\n\n function handleTouchEnd() {\n if (!isPulling) return;\n\n setIsPulling(false);\n\n // Trigger refresh if pulled far enough\n if (pullDistance > 80) {\n setIsRefreshing(true);\n loadBookmarks().finally(() => {\n setIsRefreshing(false);\n setPullDistance(0);\n });\n } else {\n setPullDistance(0);\n }\n }\n\n // Listen on document level to catch all touch events\n document.addEventListener(\"touchstart\", handleTouchStart, {\n passive: true,\n });\n document.addEventListener(\"touchmove\", handleTouchMove, {\n passive: false,\n });\n document.addEventListener(\"touchend\", handleTouchEnd);\n\n return () => {\n document.removeEventListener(\"touchstart\", handleTouchStart);\n document.removeEventListener(\"touchmove\", handleTouchMove);\n document.removeEventListener(\"touchend\", handleTouchEnd);\n };\n }, [isPulling, pullDistance, isRefreshing]);\n\n async function loadBookmarks() {\n setLoading(true);\n setError(null);\n try {\n await loadBookmarksFromContext();\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n\n function handleBookmarkUpdated(bookmark: any) {\n updateBookmark(bookmark);\n setEditingBookmark(null);\n }\n\n function handleBookmarkDeleted(uri: string) {\n deleteBookmark(uri);\n setEditingBookmark(null);\n }\n\n function handleBookmarkAdded(bookmark: any) {\n addBookmark(bookmark);\n setShowAddModal(false);\n }\n\n async function handleDropTag(bookmarkUri: string, tagValue: string) {\n try {\n // Extract rkey from URI\n const rkey = bookmarkUri.split(\"/\").pop();\n if (!rkey) {\n throw new Error(\"Invalid bookmark URI\");\n }\n\n // Find the bookmark\n const bookmark = bookmarks.find((b) => b.uri === bookmarkUri);\n if (!bookmark) {\n throw new Error(\"Bookmark not found\");\n }\n\n // Check if tag already exists\n if (bookmark.tags?.includes(tagValue)) {\n return; // Skip if already tagged\n }\n\n // Add tag to existing tags\n const newTags = [...(bookmark.tags || []), tagValue];\n\n // Update via API\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ tags: newTags }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to update bookmark tags\");\n }\n\n const data = await response.json();\n\n // Update context state\n updateBookmark(data.bookmark);\n } catch (err: any) {\n console.error(\"Failed to add tag to bookmark:\", err);\n alert(`Failed to add tag: ${err.message}`);\n }\n }\n\n function handleVisit(e: React.MouseEvent, url: string) {\n e.stopPropagation();\n globalThis.open(url, \"_blank\", \"noopener,noreferrer\");\n }\n\n async function handleShare(e: React.MouseEvent, bookmark: any) {\n e.stopPropagation();\n\n const shareData = {\n title: bookmark.title || new URL(bookmark.subject).hostname,\n text: bookmark.description\n ? `${\n bookmark.title || new URL(bookmark.subject).hostname\n }\\n\\n${bookmark.description}`\n : bookmark.title || new URL(bookmark.subject).hostname,\n url: bookmark.subject,\n };\n\n // Check if Web Share API is supported\n if (navigator.share) {\n try {\n await navigator.share(shareData);\n } catch (err: any) {\n // User cancelled or share failed\n if (err.name !== \"AbortError\") {\n console.error(\"Share failed:\", err);\n }\n }\n } else {\n // Fallback: copy to clipboard\n try {\n const textToCopy =\n `${shareData.title}\\n${shareData.text}\\n${shareData.url}`;\n await navigator.clipboard.writeText(textToCopy);\n alert(\"Link copied to clipboard!\");\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n alert(\"Sharing not supported on this browser\");\n }\n }\n }\n\n if (loading) {\n return (\n <div className=\"flex items-center justify-center py-20\">\n <div className=\"spinner\"></div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"text-center py-20\">\n <p className=\"text-red-600 mb-4\">Error: {error}</p>\n <button type=\"button\" onClick={loadBookmarks} className=\"btn-primary\">\n Try Again\n </button>\n </div>\n );\n }\n\n return (\n <div className=\"fade-in\">\n {/* Pull-to-refresh indicator */}\n <div\n style={{\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n height: `${pullDistance}px`,\n display: pullDistance > 0 ? \"flex\" : \"none\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--coral)\",\n color: \"white\",\n zIndex: 40,\n transition: isPulling ? \"none\" : \"height 0.3s ease-out\",\n }}\n >\n {isRefreshing\n ? (\n <div\n className=\"spinner\"\n style={{\n borderColor: \"white transparent transparent transparent\",\n }}\n >\n </div>\n )\n : (\n <span style={{ fontSize: \"24px\" }}>\n {pullDistance > 80 ? \"↓\" : \"↑\"}\n </span>\n )}\n </div>\n\n <div className=\"mb-6\">\n {/* Desktop: side-by-side layout */}\n <div className=\"hidden md:flex items-center justify-between\">\n <h2 className=\"text-2xl font-bold text-gray-800\">\n Your Bookmarks\n <span className=\"text-sm font-normal text-gray-500 ml-3\">\n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n </span>\n </h2>\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"btn-primary\"\n >\n + Add Bookmark\n </button>\n </div>\n\n {/* Mobile: stacked layout */}\n <div className=\"md:hidden\">\n <div className=\"flex items-center justify-between mb-2\">\n <h2 className=\"text-2xl font-bold text-gray-800\">\n Your Bookmarks\n </h2>\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"px-3 py-2 text-sm rounded-md\"\n style={{ backgroundColor: \"var(--coral)\", color: \"white\" }}\n >\n + Add\n </button>\n </div>\n <p className=\"text-sm text-gray-500\">\n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n </p>\n </div>\n </div>\n\n {bookmarks.length === 0\n ? (\n <div className=\"text-center py-20\">\n <div className=\"mb-6\">\n <span className=\"text-6xl\">📚</span>\n </div>\n <h3 className=\"text-xl font-semibold text-gray-700 mb-2\">\n No bookmarks yet\n </h3>\n <p className=\"text-gray-500 mb-6\">\n Start collecting your favorite links!\n </p>\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"btn-primary\"\n >\n Add Your First Bookmark\n </button>\n </div>\n )\n : (\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n {bookmarks.map((bookmark) => (\n <div\n key={bookmark.uri}\n className={`card hover:scale-[1.02] transition-all cursor-pointer group relative ${\n dragOverBookmark === bookmark.uri\n ? \"border-2 border-blue-500 bg-blue-50\"\n : \"\"\n }`}\n onClick={() => setEditingBookmark(bookmark)}\n onDragOver={(e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"copy\";\n }}\n onDragEnter={(e) => {\n e.preventDefault();\n setDragOverBookmark(bookmark.uri);\n }}\n onDragLeave={(e) => {\n e.preventDefault();\n // Only clear if we're leaving the card itself, not a child\n if (e.currentTarget === e.target) {\n setDragOverBookmark(null);\n }\n }}\n onDrop={(e) => {\n e.preventDefault();\n setDragOverBookmark(null);\n const tagValue = e.dataTransfer.getData(\"text/plain\");\n if (tagValue) {\n handleDropTag(bookmark.uri, tagValue);\n }\n }}\n >\n <div className=\"mb-3\">\n <h3 className=\"font-semibold text-gray-800 truncate mb-1\">\n {bookmark.title || new URL(bookmark.subject).hostname}\n </h3>\n <div className=\"text-sm text-gray-500 truncate\">\n {bookmark.subject}\n </div>\n </div>\n\n <div className=\"text-xs text-gray-400\">\n {new Date(bookmark.createdAt).toLocaleDateString()}\n </div>\n\n {bookmark.tags && bookmark.tags.length > 0 && (\n <div className=\"flex flex-wrap gap-1 mt-2\">\n {bookmark.tags.map((tag, i) => (\n <span\n key={i}\n className=\"px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700\"\n >\n {tag}\n </span>\n ))}\n </div>\n )}\n\n {/* Desktop: hover-reveal buttons (bottom-right) */}\n <div className=\"hidden md:group-hover:flex absolute bottom-2 right-2 gap-1\">\n <button\n type=\"button\"\n onClick={(e) => handleVisit(e, bookmark.subject)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n onClick={(e) => handleShare(e, bookmark)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"\n />\n </svg>\n </button>\n </div>\n\n {/* Mobile: always-visible buttons (bottom-right) */}\n <div className=\"flex md:hidden absolute bottom-2 right-2 gap-1\">\n <button\n type=\"button\"\n onClick={(e) => handleVisit(e, bookmark.subject)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n onClick={(e) => handleShare(e, bookmark)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"\n />\n </svg>\n </button>\n </div>\n </div>\n ))}\n </div>\n )}\n\n {showAddModal && (\n <AddBookmark\n onClose={() => setShowAddModal(false)}\n onBookmarkAdded={handleBookmarkAdded}\n />\n )}\n\n {editingBookmark && (\n <EditBookmark\n bookmark={editingBookmark}\n availableTags={availableTags}\n onClose={() => setEditingBookmark(null)}\n onBookmarkUpdated={handleBookmarkUpdated}\n onBookmarkDeleted={handleBookmarkDeleted}\n onTagsChanged={loadTags}\n />\n )}\n </div>\n );\n}\n",[],[278,284,322],{"_103":329,"_95":330,"_156":331,"_158":285,"_159":137,"_160":136,"_161":162,"_105":332,"_100":32,"_164":198,"_166":333,"_167":22,"_168":-5,"_169":334,"_98":335},"b11e8d56-b1c1-11f0-9e9a-0224a6c84d84","EditBookmark.tsx","019a1c40-a7c9-77ff-b434-365aa8ce408d",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedBookmark, EnrichedTag } from \"../../shared/types.ts\";\n\ninterface EditBookmarkProps {\n bookmark: EnrichedBookmark;\n availableTags: EnrichedTag[];\n onClose: () => void;\n onBookmarkUpdated: (bookmark: EnrichedBookmark) => void;\n onBookmarkDeleted: (uri: string) => void;\n onTagsChanged?: () => void;\n}\n\nexport function EditBookmark({\n bookmark,\n availableTags,\n onClose,\n onBookmarkUpdated,\n onBookmarkDeleted,\n onTagsChanged,\n}: EditBookmarkProps) {\n const [tags, setTags] = useState<string[]>(bookmark.tags || []);\n const [tagInput, setTagInput] = useState(\"\");\n const [showSuggestions, setShowSuggestions] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n // Editable fields state\n const [title, setTitle] = useState(bookmark.title || \"\");\n const [url, setUrl] = useState(bookmark.subject);\n const [description, setDescription] = useState(bookmark.description || \"\");\n\n // Filter suggestions based on input\n const suggestions = availableTags\n .filter((tag) =>\n tag.value.toLowerCase().includes(tagInput.toLowerCase()) &&\n !tags.includes(tag.value)\n )\n .slice(0, 5);\n\n function handleAddTag(tagValue: string) {\n if (tagValue && !tags.includes(tagValue)) {\n setTags([...tags, tagValue]);\n setTagInput(\"\");\n setShowSuggestions(false);\n }\n }\n\n function handleRemoveTag(tagValue: string) {\n setTags(tags.filter((t) => t !== tagValue));\n }\n\n function handleTagInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (suggestions.length > 0) {\n handleAddTag(suggestions[0].value);\n } else if (tagInput.trim()) {\n handleAddTag(tagInput.trim());\n }\n } else if (e.key === \"Escape\") {\n setShowSuggestions(false);\n }\n }\n\n async function handleSave() {\n setLoading(true);\n setError(null);\n\n try {\n // Find new tags that don't exist in availableTags\n const existingTagValues = new Set(availableTags.map((t) => t.value));\n const newTags = tags.filter((tag) => !existingTagValues.has(tag));\n\n // Create tag records for new tags\n for (const tagValue of newTags) {\n try {\n await fetch(\"/api/tags\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ value: tagValue }),\n });\n } catch (err) {\n console.error(`Failed to create tag record for \"${tagValue}\":`, err);\n // Continue even if tag creation fails\n }\n }\n\n // Update bookmark with all editable fields\n const rkey = bookmark.uri.split(\"/\").pop();\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n tags,\n title,\n url,\n description,\n }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to update bookmark\");\n }\n\n const data = await response.json();\n\n // Refresh tag list if new tags were created\n if (newTags.length > 0 && onTagsChanged) {\n onTagsChanged();\n }\n\n onBookmarkUpdated(data.bookmark);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n async function handleDelete() {\n if (!confirm(\"Are you sure you want to delete this bookmark?\")) {\n return;\n }\n\n setLoading(true);\n setError(null);\n\n try {\n const rkey = bookmark.uri.split(\"/\").pop();\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete bookmark\");\n }\n\n onBookmarkDeleted(bookmark.uri);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n <div className=\"bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto fade-in\">\n <div className=\"sticky top-0 bg-white border-b border-gray-200 px-6 py-4\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-xl font-bold text-gray-800\">Edit Bookmark</h3>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-gray-400 hover:text-gray-600 text-2xl\"\n disabled={loading}\n >\n ×\n </button>\n </div>\n </div>\n\n <div className=\"px-6 py-4 space-y-4\">\n {/* Title - Editable */}\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n Title\n </label>\n <input\n type=\"text\"\n value={title}\n onChange={(e) => setTitle(e.target.value)}\n placeholder=\"Enter bookmark title\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n </div>\n\n {/* URL - Editable */}\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n URL\n </label>\n <input\n type=\"url\"\n value={url}\n onChange={(e) => setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n </div>\n\n {/* Description - Editable */}\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n Description\n </label>\n <textarea\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n placeholder=\"Enter bookmark description (optional)\"\n rows={3}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition resize-y\"\n disabled={loading}\n />\n </div>\n\n {/* Tags - Editable */}\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n Tags\n </label>\n\n {/* Current tags */}\n {tags.length > 0 && (\n <div className=\"flex flex-wrap gap-2 mb-3\">\n {tags.map((tag) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-sm\"\n >\n {tag}\n <button\n type=\"button\"\n onClick={() => handleRemoveTag(tag)}\n className=\"text-gray-500 hover:text-red-600 ml-1\"\n disabled={loading}\n >\n ×\n </button>\n </span>\n ))}\n </div>\n )}\n\n {/* Add tag input */}\n <div className=\"relative\">\n <input\n type=\"text\"\n value={tagInput}\n onChange={(e) => {\n setTagInput(e.target.value);\n setShowSuggestions(true);\n }}\n onKeyDown={handleTagInputKeyDown}\n onFocus={() => setShowSuggestions(true)}\n onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}\n placeholder=\"Add tags...\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n\n {/* Suggestions dropdown */}\n {showSuggestions && suggestions.length > 0 && (\n <div className=\"absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n {suggestions.map((tag) => (\n <button\n key={tag.uri}\n type=\"button\"\n onClick={() => handleAddTag(tag.value)}\n className=\"w-full text-left px-4 py-2 hover:bg-gray-50 text-gray-700 text-sm\"\n >\n {tag.value}\n </button>\n ))}\n </div>\n )}\n </div>\n\n <p className=\"text-xs text-gray-500 mt-2\">\n Type to search existing tags or press Enter to create a new one\n </p>\n </div>\n\n {/* Created date */}\n <div className=\"text-xs text-gray-400 pt-2\">\n Created {new Date(bookmark.createdAt).toLocaleDateString()} at{\" \"}\n {new Date(bookmark.createdAt).toLocaleTimeString()}\n </div>\n\n {error && (\n <div className=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm\">\n {error}\n </div>\n )}\n </div>\n\n {/* Footer with action buttons */}\n <div className=\"sticky bottom-0 bg-white border-t border-gray-200 px-6 py-4 space-y-3\">\n <div className=\"flex gap-3\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"flex-1 px-4 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition\"\n disabled={loading}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={handleSave}\n className=\"flex-1 btn-primary disabled:opacity-50\"\n disabled={loading}\n >\n {loading\n ? (\n <span className=\"flex items-center justify-center gap-2\">\n <div className=\"spinner w-5 h-5 border-2\"></div>\n Saving...\n </span>\n )\n : (\n \"Save Changes\"\n )}\n </button>\n </div>\n\n <button\n type=\"button\"\n onClick={handleDelete}\n className=\"w-full px-4 py-3 rounded-lg bg-red-50 text-red-600 font-medium hover:bg-red-100 transition border border-red-200\"\n disabled={loading}\n >\n Delete Bookmark\n </button>\n </div>\n </div>\n </div>\n );\n}\n",[],[278,284,330],{"_103":337,"_95":338,"_156":339,"_158":285,"_159":137,"_160":136,"_161":162,"_105":340,"_100":32,"_164":198,"_166":341,"_167":22,"_168":-5,"_169":342,"_98":343},"b11e9698-b1c1-11f0-9e9a-0224a6c84d84","EditTag.tsx","019a1c40-a7c9-77ff-b434-38bf34e48882",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedTag } from \"../../shared/types.ts\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\ninterface EditTagProps {\n tag: EnrichedTag;\n onClose: () => void;\n onTagUpdated: (tag: EnrichedTag) => void;\n onTagDeleted: (tagUri: string) => void;\n}\n\nexport function EditTag(\n { tag, onClose, onTagUpdated, onTagDeleted }: EditTagProps,\n) {\n const { loadBookmarks } = useApp();\n const [value, setValue] = useState(tag.value);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n // Extract rkey from URI (format: at://did:plc:xxx/com.kipclip.tag/rkey)\n const rkey = tag.uri.split(\"/\").pop()!;\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n\n if (!value.trim()) {\n setError(\"Tag value cannot be empty\");\n return;\n }\n\n const newValue = value.trim();\n const hasChanged = newValue !== tag.value;\n\n if (!hasChanged) {\n // No change, just close\n onClose();\n return;\n }\n\n setIsSubmitting(true);\n setError(null);\n\n try {\n const response = await fetch(`/api/tags/${rkey}`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ value: newValue }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to update tag\");\n }\n\n const data = await response.json();\n\n // Refresh bookmarks since tag was renamed on them\n if (hasChanged) {\n await loadBookmarks();\n }\n\n if (data.tag) {\n onTagUpdated(data.tag);\n }\n } catch (err: any) {\n setError(err.message);\n setIsSubmitting(false);\n }\n }\n\n async function handleDelete() {\n setIsDeleting(true);\n setError(null);\n\n try {\n // First, fetch usage count\n const usageResponse = await fetch(`/api/tags/${rkey}/usage`);\n if (!usageResponse.ok) {\n throw new Error(\"Failed to check tag usage\");\n }\n\n const usageData = await usageResponse.json();\n const count = usageData.count || 0;\n\n // Show detailed confirmation\n let confirmMessage = `Delete tag \"${tag.value}\"?`;\n if (count > 0) {\n confirmMessage += `\\n\\nThis tag is used on ${count} bookmark${\n count === 1 ? \"\" : \"s\"\n } and will be removed from ${count === 1 ? \"it\" : \"all of them\"}.`;\n confirmMessage += \"\\n\\nThis action cannot be undone.\";\n }\n\n if (!confirm(confirmMessage)) {\n setIsDeleting(false);\n return;\n }\n\n // Delete the tag (backend will remove from bookmarks)\n const deleteResponse = await fetch(`/api/tags/${rkey}`, {\n method: \"DELETE\",\n });\n\n if (!deleteResponse.ok) {\n const data = await deleteResponse.json();\n throw new Error(data.error || \"Failed to delete tag\");\n }\n\n // Refresh bookmarks if any were affected\n if (count > 0) {\n await loadBookmarks();\n }\n\n onTagDeleted(tag.uri);\n } catch (err: any) {\n setError(err.message);\n setIsDeleting(false);\n }\n }\n\n return (\n <div\n className=\"fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50\"\n onClick={onClose}\n >\n <div\n className=\"bg-white rounded-lg shadow-xl max-w-md w-full p-6\"\n onClick={(e) => e.stopPropagation()}\n >\n <h2 className=\"text-xl font-bold text-gray-800 mb-4\">Edit Tag</h2>\n\n <form onSubmit={handleSubmit}>\n <div className=\"mb-4\">\n <label\n htmlFor=\"tag-value\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Tag Value\n </label>\n <input\n id=\"tag-value\"\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter tag value\"\n maxLength={64}\n disabled={isSubmitting || isDeleting}\n autoFocus\n />\n <p className=\"text-xs text-gray-500 mt-1\">\n {value.length}/64 characters\n </p>\n </div>\n\n {error && (\n <div className=\"mb-4 bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded text-sm\">\n {error}\n </div>\n )}\n\n <div className=\"flex gap-2 justify-between\">\n <button\n type=\"button\"\n onClick={handleDelete}\n disabled={isSubmitting || isDeleting}\n className=\"px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition text-sm font-medium\"\n >\n {isDeleting ? \"Deleting...\" : \"Delete\"}\n </button>\n\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={onClose}\n disabled={isSubmitting || isDeleting}\n className=\"px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition text-sm font-medium\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting || isDeleting || !value.trim()}\n className=\"px-4 py-2 btn-primary disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium\"\n >\n {isSubmitting ? \"Saving...\" : \"Save\"}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n );\n}\n",[],[278,284,338],{"_103":345,"_95":346,"_156":347,"_158":285,"_159":137,"_160":136,"_161":162,"_105":348,"_100":32,"_164":198,"_166":349,"_167":22,"_168":-5,"_169":350,"_98":351},"b11e9c60-b1c1-11f0-9e9a-0224a6c84d84","Login.tsx","019a1c40-a7c9-77ff-b434-3c60e8011552",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\n\nexport function Login() {\n const [handle, setHandle] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n function handleLogin(e: React.FormEvent) {\n e.preventDefault();\n if (!handle.trim()) return;\n\n setLoading(true);\n try {\n // Redirect to OAuth login\n globalThis.location.href = `/login?handle=${encodeURIComponent(handle)}`;\n } catch (error) {\n console.error(\"Login failed:\", error);\n setLoading(false);\n }\n }\n\n return (\n <div className=\"min-h-screen flex items-center justify-center px-4\">\n <div className=\"max-w-md w-full\">\n <div className=\"text-center mb-8 fade-in\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760376452/kip-satchel-transparent_ewnh0j.png\"\n alt=\"kipclip mascot - a friendly chicken with a bookmark bag\"\n className=\"w-48 h-48 mx-auto mb-6 object-contain\"\n />\n <h1\n className=\"text-4xl font-bold mb-2\"\n style={{ color: \"var(--coral)\" }}\n >\n kipclip\n </h1>\n <p className=\"text-gray-600\">\n You find it, you kip it\n </p>\n </div>\n\n <div className=\"card fade-in\">\n <form onSubmit={handleLogin} className=\"space-y-4\">\n <div>\n <label\n htmlFor=\"handle\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Your AT Protocol handle\n </label>\n <input\n type=\"text\"\n id=\"handle\"\n value={handle}\n onChange={(e) => setHandle(e.target.value)}\n placeholder=\"alice.bsky.social\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n autoFocus\n />\n </div>\n\n <button\n type=\"submit\"\n disabled={loading || !handle.trim()}\n className=\"btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {loading\n ? (\n <span className=\"flex items-center justify-center gap-2\">\n <div className=\"spinner w-5 h-5 border-2\"></div>\n Connecting...\n </span>\n )\n : (\n \"Sign in with AT Protocol\"\n )}\n </button>\n </form>\n\n <div className=\"mt-6 text-center text-sm text-gray-500\">\n <p>\n kipclip saves bookmarks to your personal data server using the\n {\" \"}\n <a\n href=\"https://github.com/lexicon-community/lexicon/blob/main/community/lexicon/bookmarks/bookmark.json\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"underline hover:text-gray-700\"\n >\n community bookmark lexicon\n </a>\n </p>\n </div>\n </div>\n </div>\n </div>\n );\n}\n",[],[278,284,346],{"_103":353,"_95":354,"_156":355,"_158":285,"_159":137,"_160":136,"_161":162,"_105":356,"_100":32,"_164":198,"_166":357,"_167":22,"_168":-5,"_169":358,"_98":359},"b11e9fc6-b1c1-11f0-9e9a-0224a6c84d84","Save.tsx","019a1c40-a7c9-77ff-b434-428fb7566ea6",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useState } from \"https://esm.sh/react\";\n\nexport function Save() {\n const [session, setSession] = useState<\n { did: string; handle: string } | null\n >(null);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [saved, setSaved] = useState(false);\n const [error, setError] = useState<string | null>(null);\n const [url, setUrl] = useState(\"\");\n\n useEffect(() => {\n // Get URL from query params\n const params = new URLSearchParams(globalThis.location.search);\n const urlParam = params.get(\"url\");\n if (urlParam) {\n setUrl(urlParam);\n }\n\n // Check session\n checkSession();\n }, []);\n\n async function checkSession() {\n try {\n const response = await fetch(\"/api/auth/session\");\n if (response.ok) {\n const data = await response.json();\n setSession({\n did: data.did,\n handle: data.handle,\n });\n }\n } catch (error) {\n console.error(\"Failed to check session:\", error);\n } finally {\n setLoading(false);\n }\n }\n\n async function handleSave(e: React.FormEvent) {\n e.preventDefault();\n if (!url.trim()) return;\n\n setSaving(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/bookmarks\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ url: url.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to add bookmark\");\n }\n\n setSaved(true);\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n function handleClose() {\n globalThis.close();\n }\n\n if (loading) {\n return (\n <div className=\"flex items-center justify-center min-h-screen bg-gray-50\">\n <div className=\"spinner\"></div>\n </div>\n );\n }\n\n if (!session) {\n const loginUrl = `/login?redirect=${\n encodeURIComponent(\n globalThis.location.pathname + globalThis.location.search,\n )\n }`;\n return (\n <div className=\"flex items-center justify-center min-h-screen bg-gray-50 p-4\">\n <div className=\"bg-white rounded-lg max-w-md w-full p-8 shadow-lg text-center\">\n <div className=\"mb-6\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png\"\n alt=\"Kip logo\"\n className=\"w-16 h-16 mx-auto mb-4\"\n />\n <h1 className=\"text-2xl font-bold text-gray-800 mb-2\">\n Login Required\n </h1>\n <p className=\"text-gray-600\">\n Sign in to save bookmarks to kipclip\n </p>\n </div>\n\n <a\n href={loginUrl}\n className=\"inline-block w-full btn-primary py-3 px-4 rounded-lg text-center\"\n >\n Sign in with AT Protocol\n </a>\n </div>\n </div>\n );\n }\n\n if (saved) {\n return (\n <div className=\"flex items-center justify-center min-h-screen bg-gray-50 p-4\">\n <div className=\"bg-white rounded-lg max-w-md w-full p-8 shadow-lg text-center\">\n <div className=\"mb-6\">\n <div className=\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n <svg\n className=\"w-8 h-8 text-green-600\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M5 13l4 4L19 7\"\n />\n </svg>\n </div>\n <h2 className=\"text-2xl font-bold text-gray-800 mb-2\">\n Bookmark Saved!\n </h2>\n <p className=\"text-gray-600 mb-6\">\n Your bookmark has been saved to kipclip\n </p>\n </div>\n\n <div className=\"space-y-3\">\n <button\n type=\"button\"\n onClick={handleClose}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition\"\n >\n Close Window\n </button>\n <a\n href=\"/\"\n className=\"block w-full px-4 py-3 rounded-lg btn-primary text-center\"\n >\n View All Bookmarks\n </a>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"flex items-center justify-center min-h-screen bg-gray-50 p-4\">\n <div className=\"bg-white rounded-lg max-w-md w-full p-6 shadow-lg\">\n <div className=\"flex items-center justify-between mb-6\">\n <div className=\"flex items-center gap-2\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png\"\n alt=\"Kip logo\"\n className=\"w-8 h-8\"\n />\n <h2 className=\"text-xl font-bold text-gray-800\">Save Bookmark</h2>\n </div>\n <button\n type=\"button\"\n onClick={handleClose}\n className=\"text-gray-400 hover:text-gray-600 text-2xl\"\n disabled={saving}\n >\n ×\n </button>\n </div>\n\n <div className=\"mb-4 text-sm text-gray-600\">\n Signed in as <span className=\"font-medium\">@{session.handle}</span>\n </div>\n\n <form onSubmit={handleSave} className=\"space-y-4\">\n <div>\n <label\n htmlFor=\"url\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n URL\n </label>\n <input\n type=\"url\"\n id=\"url\"\n value={url}\n onChange={(e) => setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={saving}\n autoFocus\n required\n />\n </div>\n\n {error && (\n <div className=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm\">\n {error}\n </div>\n )}\n\n <button\n type=\"submit\"\n className=\"w-full btn-primary py-3 disabled:opacity-50\"\n disabled={saving || !url.trim()}\n >\n {saving\n ? (\n <span className=\"flex items-center justify-center gap-2\">\n <div className=\"spinner w-5 h-5 border-2\"></div>\n Saving...\n </span>\n )\n : (\n \"Save Bookmark\"\n )}\n </button>\n </form>\n\n <p className=\"text-xs text-gray-500 mt-4 text-center\">\n The page title and description will be automatically fetched\n </p>\n </div>\n </div>\n );\n}\n",[],[278,284,354],{"_103":361,"_95":362,"_156":363,"_158":285,"_159":137,"_160":136,"_161":162,"_105":364,"_100":32,"_164":198,"_166":365,"_167":22,"_168":-5,"_169":366,"_98":367},"b11ea7f0-b1c1-11f0-9e9a-0224a6c84d84","TagSidebar.tsx","019a1c40-a7c9-77ff-b434-44d0a3f4676c",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useState } from \"https://esm.sh/react\";\nimport { AddTag } from \"./AddTag.tsx\";\nimport { EditTag } from \"./EditTag.tsx\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\nexport function TagSidebar() {\n const {\n tags,\n selectedTags,\n toggleTag,\n clearFilters,\n loadTags: loadTagsFromContext,\n addTag,\n updateTag,\n deleteTag,\n } = useApp();\n\n const [loading, setLoading] = useState(true);\n const [showAddModal, setShowAddModal] = useState(false);\n const [editingTag, setEditingTag] = useState<any>(null);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n loadTags();\n }, []);\n\n async function loadTags() {\n setLoading(true);\n setError(null);\n try {\n await loadTagsFromContext();\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n\n function handleTagAdded(tag: any) {\n addTag(tag);\n setShowAddModal(false);\n }\n\n function handleTagUpdated(updatedTag: any) {\n updateTag(updatedTag);\n setEditingTag(null);\n }\n\n function handleTagDeleted(tagUri: string) {\n deleteTag(tagUri);\n setEditingTag(null);\n }\n\n // Shared tag item renderer\n function renderTag(tag: any) {\n const isSelected = selectedTags.has(tag.value);\n return (\n <li\n key={tag.uri}\n className={`group flex items-center justify-between gap-2 px-3 py-2 rounded-lg transition text-sm whitespace-nowrap flex-shrink-0 cursor-pointer ${\n isSelected\n ? \"bg-blue-600 text-white hover:bg-blue-700\"\n : \"text-gray-700 hover:bg-gray-100\"\n }`}\n title={`Created ${new Date(tag.createdAt).toLocaleDateString()}`}\n onClick={() => {\n toggleTag(tag.value);\n }}\n >\n <div className=\"flex items-center gap-2\">\n {isSelected && (\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M5 13l4 4L19 7\"\n />\n </svg>\n )}\n <span>{tag.value}</span>\n </div>\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n setEditingTag(tag);\n }}\n className={`opacity-0 group-hover:opacity-100 transition p-1 rounded flex-shrink-0 ${\n isSelected ? \"hover:bg-blue-500\" : \"hover:bg-gray-200\"\n }`}\n title=\"Edit tag\"\n >\n <svg\n className={`w-4 h-4 ${\n isSelected ? \"text-white\" : \"text-gray-600\"\n }`}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n draggable=\"true\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n onDragStart={(e) => {\n e.stopPropagation();\n e.dataTransfer.effectAllowed = \"copy\";\n e.dataTransfer.setData(\"text/plain\", tag.value);\n const listItem = (e.target as HTMLElement).closest(\"li\");\n if (listItem) {\n // Set the drag image to the entire tag card\n e.dataTransfer.setDragImage(listItem, 20, 20);\n listItem.style.opacity = \"0.5\";\n }\n }}\n onDragEnd={(e) => {\n e.stopPropagation();\n const listItem = (e.target as HTMLElement).closest(\"li\");\n if (listItem) {\n listItem.style.opacity = \"1\";\n }\n }}\n className={`opacity-0 group-hover:opacity-100 transition p-1 rounded cursor-grab active:cursor-grabbing flex-shrink-0 ${\n isSelected ? \"hover:bg-blue-500\" : \"hover:bg-gray-200\"\n }`}\n title=\"Drag to bookmark to tag it\"\n >\n <svg\n className={`w-4 h-4 ${\n isSelected ? \"text-white\" : \"text-gray-600\"\n }`}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 8h16M4 16h16\"\n />\n </svg>\n </button>\n </div>\n </li>\n );\n }\n\n if (loading) {\n return (\n <>\n {/* Mobile: Horizontal sticky bar */}\n <div\n style={{ backgroundColor: \"var(--sidebar-bg)\" }}\n className=\"md:hidden w-full sticky top-0 z-10 border-b border-gray-200 p-3\"\n >\n <div className=\"flex items-center justify-center\">\n <div className=\"spinner\"></div>\n </div>\n </div>\n\n {/* Desktop: Vertical sidebar */}\n <aside\n style={{ backgroundColor: \"var(--sidebar-bg)\" }}\n className=\"hidden md:flex md:flex-col w-64 border-r border-gray-200 p-4\"\n >\n <div className=\"flex items-center justify-center py-10\">\n <div className=\"spinner\"></div>\n </div>\n </aside>\n </>\n );\n }\n\n return (\n <>\n {/* Mobile: Horizontal sticky bar */}\n <div\n style={{ backgroundColor: \"var(--sidebar-bg)\" }}\n className=\"md:hidden w-full sticky top-0 z-10 border-b border-gray-200\"\n >\n <div className=\"flex items-center gap-3 px-3 py-3 overflow-x-auto\">\n <h2 className=\"text-sm font-bold text-gray-800 flex-shrink-0\">\n Tags\n </h2>\n {error\n ? (\n <div className=\"flex-1 text-xs text-red-600 flex-shrink-0\">\n {error}\n </div>\n )\n : tags.length === 0\n ? (\n <div className=\"flex-1 text-xs text-gray-500 flex-shrink-0\">\n No tags yet\n </div>\n )\n : (\n <ul className=\"flex gap-2 flex-shrink-0\">\n {tags.map(renderTag)}\n </ul>\n )}\n {selectedTags.size > 0 && (\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"flex-shrink-0 px-3 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded-lg transition text-gray-700 font-medium\"\n title=\"Clear all filters\"\n >\n Clear filters\n </button>\n )}\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"flex-shrink-0 ml-auto p-2 hover:bg-gray-100 rounded-lg transition text-gray-600\"\n title=\"Create tag\"\n >\n <svg\n className=\"w-5 h-5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 4v16m8-8H4\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n {/* Desktop: Vertical sidebar */}\n <aside\n style={{ backgroundColor: \"var(--sidebar-bg)\" }}\n className=\"hidden md:flex md:flex-col w-64 border-r border-gray-200 p-4\"\n >\n <div className=\"mb-4\">\n <h2 className=\"text-lg font-bold text-gray-800 mb-3\">Tags</h2>\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"w-full btn-primary text-sm py-2 px-4\"\n >\n + Create Tag\n </button>\n </div>\n\n {selectedTags.size > 0 && (\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"w-full mb-4 px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 rounded-lg transition text-gray-700 font-medium\"\n title=\"Clear all filters\"\n >\n Clear filters ({selectedTags.size})\n </button>\n )}\n\n {error && (\n <div className=\"bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded text-xs mb-4\">\n {error}\n <button\n type=\"button\"\n onClick={() => loadTags()}\n className=\"block mt-2 underline\"\n >\n Try Again\n </button>\n </div>\n )}\n\n <div className=\"flex-1 overflow-y-auto\">\n {tags.length === 0\n ? (\n <div className=\"text-center py-10 text-gray-500 text-sm\">\n <p className=\"mb-2\">No tags yet</p>\n <p className=\"text-xs\">Create your first tag to get started</p>\n </div>\n )\n : <ul className=\"space-y-1\">{tags.map(renderTag)}</ul>}\n </div>\n </aside>\n\n {showAddModal && (\n <AddTag\n onClose={() => setShowAddModal(false)}\n onTagAdded={handleTagAdded}\n />\n )}\n\n {editingTag && (\n <EditTag\n tag={editingTag}\n onClose={() => setEditingTag(null)}\n onTagUpdated={handleTagUpdated}\n onTagDeleted={handleTagDeleted}\n />\n )}\n </>\n );\n}\n",[],[278,284,362],{"_103":369,"_95":370,"_156":371,"_158":285,"_159":137,"_160":136,"_161":162,"_105":372,"_100":32,"_164":198,"_166":373,"_167":22,"_168":-5,"_169":374,"_98":375},"b11eaf3e-b1c1-11f0-9e9a-0224a6c84d84","Tools.tsx","019a1c40-a7c9-77ff-b434-4b5a4dc6a9d1",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react\";\n\nexport function Tools() {\n const [copied, setCopied] = useState(false);\n const bookmarkletContainerRef = useRef<HTMLDivElement>(null);\n\n const bookmarkletCode =\n `javascript:(function(){window.open('https://kipclip.com/save?url='+encodeURIComponent(location.href),'kipclip','width=600,height=700')})()`;\n\n useEffect(() => {\n // Set href directly on DOM element after render to bypass React\n if (bookmarkletContainerRef.current) {\n const anchor = bookmarkletContainerRef.current.querySelector(\"a\");\n if (anchor) {\n anchor.href = bookmarkletCode;\n }\n }\n }, [bookmarkletCode]);\n\n async function handleCopy() {\n try {\n await navigator.clipboard.writeText(bookmarkletCode);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n }\n }\n\n return (\n <div className=\"min-h-screen bg-gray-50\">\n <header className=\"bg-white shadow-sm\">\n <div className=\"max-w-4xl mx-auto px-4 py-4 flex items-center justify-between\">\n <a href=\"/\" className=\"flex items-center gap-2\">\n <img\n src=\"https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png\"\n alt=\"Kip logo\"\n className=\"w-8 h-8\"\n />\n <h1\n className=\"text-2xl font-bold\"\n style={{ color: \"var(--coral)\" }}\n >\n kipclip\n </h1>\n </a>\n <a\n href=\"/\"\n className=\"text-gray-600 hover:text-gray-800 text-sm font-medium\"\n >\n Back to Bookmarks\n </a>\n </div>\n </header>\n\n <main className=\"max-w-4xl mx-auto px-4 py-12\">\n <div className=\"mb-8\">\n <h2 className=\"text-3xl font-bold text-gray-800 mb-3\">\n Save from Anywhere\n </h2>\n <p className=\"text-gray-600 text-lg\">\n Add bookmarks to kipclip from any website with these tools\n </p>\n </div>\n\n {/* Bookmarklet Section */}\n <div className=\"bg-white rounded-lg shadow-md p-8 mb-8\">\n <div className=\"flex items-start gap-3 mb-6\">\n <div className=\"w-10 h-10 bg-coral/10 rounded-lg flex items-center justify-center flex-shrink-0\">\n <svg\n className=\"w-6 h-6\"\n style={{ color: \"var(--coral)\" }}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n />\n </svg>\n </div>\n <div>\n <h3 className=\"text-xl font-bold text-gray-800 mb-2\">\n Browser Bookmarklet\n </h3>\n <p className=\"text-gray-600\">\n Works on all desktop browsers (Chrome, Firefox, Safari, Edge)\n </p>\n </div>\n </div>\n\n {/* Draggable Bookmarklet */}\n <div className=\"mb-6\">\n <div className=\"bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center\">\n <p className=\"text-sm text-gray-600 mb-4 font-medium\">\n Drag this button to your bookmarks bar:\n </p>\n <div ref={bookmarkletContainerRef}>\n <a\n href=\"\"\n onClick={(e) => e.preventDefault()}\n className=\"inline-flex items-center gap-2 px-6 py-3 rounded-lg font-bold text-white shadow-lg hover:shadow-xl transition-shadow cursor-move select-none\"\n style={{ backgroundColor: \"var(--coral)\" }}\n draggable=\"true\"\n >\n <svg\n className=\"w-5 h-5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"\n />\n </svg>\n Kip it\n </a>\n </div>\n </div>\n </div>\n\n {/* Instructions */}\n <div className=\"space-y-4 mb-6\">\n <div>\n <h4 className=\"font-semibold text-gray-800 mb-2\">\n How to install:\n </h4>\n <ol className=\"space-y-2 text-sm text-gray-700\">\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">1.</span>\n <span>\n Make sure your bookmarks bar is visible (press{\" \"}\n <kbd className=\"px-2 py-1 bg-gray-200 rounded text-xs font-mono\">\n Cmd+Shift+B\n </kbd>{\" \"}\n or{\" \"}\n <kbd className=\"px-2 py-1 bg-gray-200 rounded text-xs font-mono\">\n Ctrl+Shift+B\n </kbd>)\n </span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">2.</span>\n <span>\n Drag the \"Kip it\" button above to your bookmarks bar\n </span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">3.</span>\n <span>\n When you're on a page you want to save, click the\n bookmarklet in your bookmarks bar\n </span>\n </li>\n </ol>\n </div>\n </div>\n\n {/* Alternative Methods */}\n <div className=\"border-t pt-6\">\n <h4 className=\"font-semibold text-gray-800 mb-3\">\n Alternative installation methods:\n </h4>\n <div className=\"space-y-3 text-sm\">\n <div className=\"bg-gray-50 rounded-lg p-4\">\n <p className=\"text-gray-700 mb-2\">\n <strong>Method 2:</strong>{\" \"}\n Right-click the button above and select \"Bookmark This Link\"\n or \"Add to Bookmarks\"\n </p>\n </div>\n <div className=\"bg-gray-50 rounded-lg p-4\">\n <p className=\"text-gray-700 mb-3\">\n <strong>Method 3:</strong>{\" \"}\n Copy the code and create a bookmark manually:\n </p>\n <div className=\"flex gap-2\">\n <code className=\"flex-1 bg-white px-3 py-2 rounded border text-xs overflow-x-auto\">\n {bookmarkletCode}\n </code>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition flex-shrink-0\"\n >\n {copied ? \"Copied!\" : \"Copy\"}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/* Mobile Section */}\n <div className=\"bg-white rounded-lg shadow-md p-8\">\n <div className=\"flex items-start gap-3 mb-6\">\n <div className=\"w-10 h-10 bg-coral/10 rounded-lg flex items-center justify-center flex-shrink-0\">\n <svg\n className=\"w-6 h-6\"\n style={{ color: \"var(--coral)\" }}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z\"\n />\n </svg>\n </div>\n <div>\n <h3 className=\"text-xl font-bold text-gray-800 mb-2\">\n Mobile Devices\n </h3>\n <p className=\"text-gray-600\">\n Save bookmarks from your phone or tablet\n </p>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <div className=\"bg-gray-50 rounded-lg p-4\">\n <h4 className=\"font-semibold text-gray-800 mb-3\">\n iOS Shortcut (Recommended):\n </h4>\n <p className=\"text-sm text-gray-700 mb-4\">\n Install the \"Kip it\" shortcut to save bookmarks from Safari's\n share menu with one tap.\n </p>\n <a\n href=\"https://www.icloud.com/shortcuts/284a2a52e6cb46cc96ebed6f54fc0dfd\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-6 py-3 rounded-lg font-bold text-white shadow-lg hover:shadow-xl transition-shadow\"\n style={{ backgroundColor: \"var(--coral)\" }}\n >\n <svg\n className=\"w-5 h-5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n />\n </svg>\n Get iOS Shortcut\n </a>\n <p className=\"text-xs text-gray-600 mt-3\">\n After installing, \"Kip it\" will appear in your share menu when\n viewing web pages in Safari.\n </p>\n </div>\n\n <div className=\"bg-gray-50 rounded-lg p-4\">\n <h4 className=\"font-semibold text-gray-800 mb-2\">\n Android (Chrome):\n </h4>\n <ol className=\"space-y-2 text-sm text-gray-700\">\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">1.</span>\n <span>Open kipclip.com in Chrome</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">2.</span>\n <span>\n Tap the menu (⋮), then \"Add to Home screen\"\n </span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"font-bold text-coral min-w-[20px]\">3.</span>\n <span>\n When sharing URLs from other apps, kipclip will appear as a\n share target\n </span>\n </li>\n </ol>\n </div>\n </div>\n </div>\n\n {/* Help Section */}\n <div className=\"mt-8 text-center text-sm text-gray-600\">\n <p>\n Need help?{\" \"}\n <a\n href=\"/\"\n className=\"font-medium hover:underline\"\n style={{ color: \"var(--coral)\" }}\n >\n Contact us\n </a>\n </p>\n </div>\n </main>\n </div>\n );\n}\n",[],[278,284,370],{"_103":377,"_95":378,"_156":379,"_158":285,"_159":137,"_160":136,"_161":162,"_105":380,"_100":32,"_164":198,"_166":381,"_167":22,"_168":-5,"_169":382,"_98":383},"b11ebd44-b1c1-11f0-9e9a-0224a6c84d84","UserMenu.tsx","019a1c40-a7c9-77ff-b434-4cc7f0d6a7f8",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react\";\n\ninterface UserMenuProps {\n handle: string;\n onLogout: () => void;\n}\n\nexport function UserMenu({ handle, onLogout }: UserMenuProps) {\n const [isOpen, setIsOpen] = useState(false);\n const menuRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n }\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n\n return (\n <div className=\"relative\" ref={menuRef}>\n {/* Desktop: Username button */}\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n className=\"hidden md:flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors\"\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n >\n <span className=\"text-sm font-medium text-gray-700\">\n @{handle}\n </span>\n <svg\n className={`w-4 h-4 text-gray-500 transition-transform ${\n isOpen ? \"rotate-180\" : \"\"\n }`}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M19 9l-7 7-7-7\"\n />\n </svg>\n </button>\n\n {/* Mobile: Hamburger button */}\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n className=\"md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors\"\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n aria-label=\"Menu\"\n >\n <svg\n className=\"w-6 h-6 text-gray-700\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n {isOpen\n ? (\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M6 18L18 6M6 6l12 12\"\n />\n )\n : (\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 6h16M4 12h16M4 18h16\"\n />\n )}\n </svg>\n </button>\n\n {/* Dropdown menu */}\n {isOpen && (\n <div className=\"absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50\">\n {/* Mobile only: Show username in menu */}\n <div className=\"md:hidden px-4 py-3 border-b border-gray-200\">\n <p className=\"text-sm font-medium text-gray-900\">@{handle}</p>\n </div>\n\n <a\n href=\"/tools\"\n className=\"flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors\"\n onClick={() => setIsOpen(false)}\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n />\n </svg>\n Tools\n </a>\n\n <a\n href=\"/about\"\n className=\"flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors\"\n onClick={() => setIsOpen(false)}\n >\n <svg\n className=\"w-4 h-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z\"\n />\n </svg>\n About\n </a>\n\n <button\n type=\"button\"\n onClick={() => {\n setIsOpen(false);\n onLogout();\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors\"\n >\n Logout\n </button>\n </div>\n )}\n </div>\n );\n}\n",[],[278,284,378],[278,284],{"_103":386,"_95":387,"_156":388,"_158":279,"_159":137,"_160":136,"_161":162,"_105":389,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":390,"_98":399},"b11ec9a6-b1c1-11f0-9e9a-0224a6c84d84","context","019a1c40-a7c9-77ff-b434-5b3a58251124",["D",1761410590580],[391],{"_103":392,"_95":393,"_156":394,"_158":388,"_159":137,"_160":136,"_161":162,"_105":395,"_100":32,"_164":198,"_166":396,"_167":22,"_168":-5,"_169":397,"_98":398},"b11ec618-b1c1-11f0-9e9a-0224a6c84d84","AppContext.tsx","019a1c40-a7c9-77ff-b434-557d28c024c5",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport {\n createContext,\n type ReactNode,\n useContext,\n useState,\n} from \"https://esm.sh/react\";\nimport type {\n EnrichedBookmark,\n EnrichedTag,\n SessionInfo,\n} from \"../../shared/types.ts\";\n\ninterface AppState {\n session: SessionInfo | null;\n bookmarks: EnrichedBookmark[];\n tags: EnrichedTag[];\n selectedTags: Set<string>;\n loading: boolean;\n}\n\ninterface AppContextValue extends AppState {\n // Session actions\n setSession: (session: SessionInfo | null) => void;\n\n // Bookmark actions\n setBookmarks: (bookmarks: EnrichedBookmark[]) => void;\n addBookmark: (bookmark: EnrichedBookmark) => void;\n updateBookmark: (bookmark: EnrichedBookmark) => void;\n deleteBookmark: (uri: string) => void;\n loadBookmarks: () => Promise<void>;\n\n // Tag actions\n setTags: (tags: EnrichedTag[]) => void;\n addTag: (tag: EnrichedTag) => void;\n updateTag: (tag: EnrichedTag) => void;\n deleteTag: (uri: string) => void;\n loadTags: () => Promise<void>;\n\n // Filter actions\n toggleTag: (tagValue: string) => void;\n clearFilters: () => void;\n\n // Computed values\n filteredBookmarks: EnrichedBookmark[];\n}\n\nconst AppContext = createContext<AppContextValue | null>(null);\n\nexport function AppProvider({ children }: { children: ReactNode }) {\n const [session, setSession] = useState<SessionInfo | null>(null);\n const [bookmarks, setBookmarks] = useState<EnrichedBookmark[]>([]);\n const [tags, setTags] = useState<EnrichedTag[]>([]);\n const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());\n const [loading, _setLoading] = useState(true);\n\n // Bookmark actions\n async function loadBookmarks() {\n try {\n const response = await fetch(\"/api/bookmarks\");\n if (!response.ok) {\n throw new Error(\"Failed to load bookmarks\");\n }\n const data = await response.json();\n setBookmarks(data.bookmarks);\n } catch (err) {\n console.error(\"Failed to load bookmarks:\", err);\n throw err;\n }\n }\n\n function addBookmark(bookmark: EnrichedBookmark) {\n setBookmarks((prev) => [bookmark, ...prev]);\n }\n\n function updateBookmark(bookmark: EnrichedBookmark) {\n setBookmarks((prev) =>\n prev.map((b) => b.uri === bookmark.uri ? bookmark : b)\n );\n }\n\n function deleteBookmark(uri: string) {\n setBookmarks((prev) => prev.filter((b) => b.uri !== uri));\n }\n\n // Tag actions\n async function loadTags() {\n try {\n const response = await fetch(\"/api/tags\");\n if (!response.ok) {\n throw new Error(\"Failed to load tags\");\n }\n const data = await response.json();\n setTags(data.tags);\n } catch (err) {\n console.error(\"Failed to load tags:\", err);\n throw err;\n }\n }\n\n function addTag(tag: EnrichedTag) {\n setTags((prev) => [tag, ...prev]);\n }\n\n function updateTag(tag: EnrichedTag) {\n setTags((prev) => prev.map((t) => t.uri === tag.uri ? tag : t));\n }\n\n function deleteTag(uri: string) {\n setTags((prev) => prev.filter((t) => t.uri !== uri));\n }\n\n // Filter actions\n function toggleTag(tagValue: string) {\n setSelectedTags((prev) => {\n const newSet = new Set(prev);\n if (newSet.has(tagValue)) {\n newSet.delete(tagValue);\n } else {\n newSet.add(tagValue);\n }\n return newSet;\n });\n }\n\n function clearFilters() {\n setSelectedTags(new Set());\n }\n\n // Computed values\n const filteredBookmarks = selectedTags.size === 0\n ? bookmarks\n : bookmarks.filter((bookmark) =>\n [...selectedTags].every((tag) => bookmark.tags?.includes(tag))\n );\n\n const value: AppContextValue = {\n // State\n session,\n bookmarks,\n tags,\n selectedTags,\n loading,\n\n // Session actions\n setSession,\n\n // Bookmark actions\n setBookmarks,\n addBookmark,\n updateBookmark,\n deleteBookmark,\n loadBookmarks,\n\n // Tag actions\n setTags,\n addTag,\n updateTag,\n deleteTag,\n loadTags,\n\n // Filter actions\n toggleTag,\n clearFilters,\n\n // Computed values\n filteredBookmarks,\n };\n\n return <AppContext.Provider value={value}>{children}</AppContext.Provider>;\n}\n\nexport function useApp() {\n const context = useContext(AppContext);\n if (!context) {\n throw new Error(\"useApp must be used within AppProvider\");\n }\n return context;\n}\n",[],[278,387,393],[278,387],{"_103":401,"_95":402,"_156":403,"_158":279,"_159":137,"_160":136,"_161":162,"_105":404,"_100":32,"_164":176,"_166":405,"_167":22,"_168":-5,"_169":406,"_98":407},"b11ecbae-b1c1-11f0-9e9a-0224a6c84d84","index.html","019a1c40-a7c9-77ff-b434-5f9d9cbeac9b",["D",1761410590580],"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>kipclip

\n \n \n\n",[],[278,402],{"_103":409,"_95":410,"_156":411,"_158":279,"_159":137,"_160":136,"_161":162,"_105":412,"_100":32,"_164":198,"_166":413,"_167":22,"_168":-5,"_169":414,"_98":415},"b11ece24-b1c1-11f0-9e9a-0224a6c84d84","index.tsx","019a1c40-a7c9-77ff-b434-6111b1d3a96d",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { App } from \"./components/App.tsx\";\nimport { AppProvider } from \"./context/AppContext.tsx\";\n\n// Only run in browser environment\nif (typeof document !== \"undefined\") {\n const root = createRoot(document.getElementById(\"root\")!);\n root.render(\n \n \n ,\n );\n}\n",[],[278,410],{"_103":417,"_95":418,"_156":419,"_158":279,"_159":137,"_160":136,"_161":162,"_105":420,"_100":32,"_164":176,"_166":421,"_167":22,"_168":-5,"_169":422,"_98":423},"b11ecf50-b1c1-11f0-9e9a-0224a6c84d84","style.css","019a1c40-a7c9-77ff-b434-67a92ed6caf6",["D",1761410590580],"/* kipclip styles - matching the cute chicken mascot aesthetic */\n\n:root {\n --cream: #f5f1e8;\n --coral: #e66456;\n --teal: #5b8a8f;\n --orange: #f4a261;\n --dark-gray: #2d3748;\n --light-gray: #e2e8f0;\n --sidebar-bg: #f7f9fa;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n Arial, sans-serif;\n background: linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%);\n color: var(--dark-gray);\n min-height: 100vh;\n}\n\n#root {\n min-height: 100vh;\n}\n\n/* Utility classes to complement Tailwind */\n.btn-primary {\n background-color: var(--coral);\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary:hover {\n background-color: #d45546;\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background-color: var(--teal);\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n background-color: #4a7a7f;\n transform: translateY(-1px);\n}\n\n.card {\n background: white;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n padding: 1.5rem;\n transition: all 0.2s;\n}\n\n.card:hover {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* Loading spinner */\n.spinner {\n border: 3px solid var(--light-gray);\n border-top-color: var(--coral);\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Smooth page transitions */\n.fade-in {\n animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n",[],[278,418],[278],{"_103":426,"_95":427,"_156":428,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":429,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":430,"_98":453},"b11ed540-b1c1-11f0-9e9a-0224a6c84d84","lexicons","019a1c40-a7c9-77ff-b434-78552cf1d13a",["D",1761410590580],[431],{"_103":432,"_95":433,"_156":434,"_158":428,"_159":137,"_160":136,"_161":162,"_105":435,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":436,"_98":452},"b11ed43c-b1c1-11f0-9e9a-0224a6c84d84","com","019a1c40-a7c9-77ff-b434-7619f8b6e9ae",["D",1761410590580],[437],{"_103":438,"_95":439,"_156":440,"_158":434,"_159":137,"_160":136,"_161":162,"_105":441,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":442,"_98":451},"b11ed338-b1c1-11f0-9e9a-0224a6c84d84","kipclip","019a1c40-a7c9-77ff-b434-704b5b314bf7",["D",1761410590580],[443],{"_103":444,"_95":445,"_156":446,"_158":440,"_159":137,"_160":136,"_161":162,"_105":447,"_100":32,"_164":176,"_166":448,"_167":22,"_168":-5,"_169":449,"_98":450},"b11ed1a8-b1c1-11f0-9e9a-0224a6c84d84","tag.json","019a1c40-a7c9-77ff-b434-6c2b56477050",["D",1761410590580],"{\n \"lexicon\": 1,\n \"id\": \"com.kipclip.tag\",\n \"description\": \"A user-defined tag for organizing bookmarks\",\n \"defs\": {\n \"main\": {\n \"type\": \"record\",\n \"key\": \"tid\",\n \"record\": {\n \"type\": \"object\",\n \"required\": [\"value\", \"createdAt\"],\n \"properties\": {\n \"value\": {\n \"type\": \"string\",\n \"maxLength\": 64,\n \"description\": \"The tag text\"\n },\n \"createdAt\": {\n \"type\": \"datetime\",\n \"description\": \"Timestamp when tag was created\"\n }\n }\n }\n }\n }\n}\n",[],[427,433,439,445],[427,433,439],[427,433],[427],{"_103":455,"_95":456,"_156":457,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":458,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":459,"_98":475},"b11ef462-b1c1-11f0-9e9a-0224a6c84d84","resources","019a1c40-a7c9-77ff-b434-848d450d7420",["D",1761410590580],[460],{"_103":461,"_95":462,"_156":463,"_158":457,"_159":137,"_160":136,"_161":162,"_105":464,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":465,"_98":474},"b11ef2fa-b1c1-11f0-9e9a-0224a6c84d84","favicons","019a1c40-a7c9-77ff-b434-81c61c4aa9d4",["D",1761410590580],[466],{"_103":467,"_95":468,"_156":469,"_158":463,"_159":137,"_160":136,"_161":162,"_105":470,"_100":32,"_164":176,"_166":471,"_167":22,"_168":-5,"_169":472,"_98":473},"b11ef0ac-b1c1-11f0-9e9a-0224a6c84d84","site.webmanifest","019a1c40-a7c9-77ff-b434-7d6d35ead8de",["D",1761410590580],"{\"name\":\"\",\"short_name\":\"\",\"icons\":[{\"src\":\"/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"},{\"src\":\"/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],\"theme_color\":\"#ffffff\",\"background_color\":\"#ffffff\",\"display\":\"standalone\"}",[],[456,462,468],[456,462],[456],{"_103":477,"_95":478,"_156":479,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":480,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":481,"_98":490},"b11ef796-b1c1-11f0-9e9a-0224a6c84d84","shared","019a1c40-a7c9-77ff-b434-8e315ec9358e",["D",1761410590580],[482],{"_103":483,"_95":484,"_156":485,"_158":479,"_159":137,"_160":136,"_161":162,"_105":486,"_100":32,"_164":198,"_166":487,"_167":22,"_168":-5,"_169":488,"_98":489},"b11ef5ac-b1c1-11f0-9e9a-0224a6c84d84","types.ts","019a1c40-a7c9-77ff-b434-88fc3384b079",["D",1761410590580],"// Shared TypeScript types for kipclip\n\n// AT Protocol bookmark record type\nexport interface BookmarkRecord {\n subject: string; // URI of the bookmarked content\n createdAt: string; // ISO 8601 datetime\n tags?: string[]; // Optional tags\n}\n\n// Enriched bookmark with metadata\nexport interface EnrichedBookmark extends BookmarkRecord {\n uri: string; // AT Protocol URI for this record\n cid: string; // Content ID\n title?: string; // Extracted page title\n description?: string; // Extracted meta description (future)\n favicon?: string; // Extracted favicon URL (future)\n}\n\n// API request/response types\nexport interface AddBookmarkRequest {\n url: string;\n}\n\nexport interface AddBookmarkResponse {\n success: boolean;\n bookmark?: EnrichedBookmark;\n error?: string;\n}\n\nexport interface ListBookmarksResponse {\n bookmarks: EnrichedBookmark[];\n}\n\n// URL metadata extraction result\nexport interface UrlMetadata {\n title?: string;\n description?: string;\n favicon?: string;\n}\n\n// Session info\nexport interface SessionInfo {\n did: string;\n handle: string;\n}\n\n// AT Protocol tag record type\nexport interface TagRecord {\n value: string; // Tag text (max 64 chars)\n createdAt: string; // ISO 8601 datetime\n}\n\n// Enriched tag with metadata\nexport interface EnrichedTag extends TagRecord {\n uri: string; // AT Protocol URI for this record\n cid: string; // Content ID\n}\n\n// Tag API request/response types\nexport interface AddTagRequest {\n value: string;\n}\n\nexport interface AddTagResponse {\n success: boolean;\n tag?: EnrichedTag;\n error?: string;\n}\n\nexport interface ListTagsResponse {\n tags: EnrichedTag[];\n}\n\nexport interface UpdateTagRequest {\n value: string;\n}\n\nexport interface UpdateTagResponse {\n success: boolean;\n tag?: EnrichedTag;\n error?: string;\n}\n\nexport interface DeleteTagResponse {\n success: boolean;\n error?: string;\n}\n\n// Bookmark tag update request/response types\nexport interface UpdateBookmarkTagsRequest {\n tags: string[];\n title?: string;\n url?: string;\n description?: string;\n}\n\nexport interface UpdateBookmarkTagsResponse {\n success: boolean;\n bookmark?: EnrichedBookmark;\n error?: string;\n}\n",[],[478,484],[478],{"_103":492,"_95":493,"_156":494,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":495,"_100":32,"_164":176,"_166":496,"_167":22,"_168":-5,"_169":497,"_98":498},"b11ef8a4-b1c1-11f0-9e9a-0224a6c84d84",".env.example","019a1c40-a7c9-77ff-b434-924092335e02",["D",1761410590580],"# Val.town Base URL\nBASE_URL=https://your-val.val.town\n",[],[493],{"_103":500,"_95":501,"_156":502,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":503,"_100":32,"_164":176,"_166":504,"_167":22,"_168":-5,"_169":505,"_98":506},"b11ef9c6-b1c1-11f0-9e9a-0224a6c84d84",".gitignore","019a1c40-a7c9-77ff-b434-95aa30922ab0",["D",1761410590580],"# Environment variables\n.env\n.env.local\n.env.*.local\n\n# Deno\n.deno/\n\n# Val.town\n.vt/\n\n# Editor\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\n",[],[501],{"_103":508,"_95":509,"_156":510,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":511,"_100":32,"_164":176,"_166":512,"_167":22,"_168":-5,"_169":513,"_98":514},"b11efb06-b1c1-11f0-9e9a-0224a6c84d84",".vtignore","019a1c40-a7c9-77ff-b434-98d9e4ee3248",["D",1761410590580],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\nresources",[],[509],{"_103":516,"_95":517,"_156":518,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":519,"_100":32,"_164":176,"_166":520,"_167":22,"_168":-5,"_169":521,"_98":522},"b11f0024-b1c1-11f0-9e9a-0224a6c84d84","CLAUDE.md","019a1c40-a7c9-77ff-b434-9e4485880502",["D",1761410590580],"# Val Town Development Guide\n\nYou are an advanced assistant that helps programmers code on Val Town.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Plan large refactors or big features before you start coding\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- Always prefer small, single purpose, single responsibility components over\n large files that do many things\n- If a section of code is getting too complex, consider refactoring it into\n subcomponents\n- **Frontend = React, Backend = Hono, Database = Drizzle** - This is the way\n- **Write testable code** - Use dependency injection, follow SOLID principles,\n mock external services, write fakes instead of testing dependencies\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n- **Every function must be testable** - Accept dependencies as parameters,\n return predictable outputs\n- **Write tests alongside code** - Place `.test.ts` files next to the code they\n test\n\n## Project Structure\n\n### Project Organization\n\nWhen organizing a Val Town project, consider separating deployable code from\nlocal resources:\n\n```text\n├── your-project-name/ # Deployable directory (what Val Town will see)\n│ ├── backend/\n│ │ ├── database/\n│ │ │ ├── schema.ts # All table definitions, relations, and types\n│ │ │ ├── db.ts # Database connection and Drizzle instance \n│ │ │ ├── migrations.ts # Schema migration logic\n│ │ │ └── queries.ts # Reusable query functions\n│ │ ├── routes/ # Route modules\n│ │ │ ├── [route].ts\n│ │ │ └── static.ts # Static file serving\n│ │ └── index.ts # Main entry point\n│ ├── frontend/\n│ │ ├── components/\n│ │ │ ├── App.tsx\n│ │ │ └── [Component].tsx\n│ │ ├── index.html # Minimal HTML bootstrap file\n│ │ ├── index.tsx # React entry point with createRoot\n│ │ └── style.css # Global styles (prefer Tailwind classes)\n│ ├── shared/\n│ │ └── utils.ts # Shared types and functions\n│ └── deno.json # Deno configuration (MUST be in the deployed directory)\n├── resources/ # Local-only resources (images, assets)\n├── docs/ # Local-only documentation\n├── README.md # Project documentation\n└── AGENTS.md # AI assistant instructions\n```\n\n**Key Points:**\n\n- Only the contents of your main project directory will be deployed to Val Town\n- The `deno.json` file MUST be inside the deployment directory\n- Keep non-deployable resources outside the deployment directory\n\n### Deno Configuration\n\nPlace your `deno.json` in the deployable directory with proper structure:\n\n```json\n{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react\",\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-import-prefix\"\n ]\n }\n },\n \"include\": [\n \"backend/\",\n \"frontend/\",\n \"shared/\"\n ],\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n },\n \"tasks\": {\n \"quality\": \"deno fmt && deno lint\",\n \"deploy\": \"deno task quality && vt push\",\n \"check\": \"deno check --allow-import backend/index.ts\",\n \"test\": \"deno test --allow-all tests/\",\n \"fmt\": \"deno fmt\",\n \"lint\": \"deno lint\"\n }\n}\n```\n\n**Key Points:**\n\n- Use `\"include\"` at root level to specify which directories contain TypeScript\n files\n- Don't use glob patterns in lint/check commands - they fail silently\n- Type checking requires `--allow-import` flag for remote dependencies\n- Keep quality checks minimal for deployment (fmt + lint)\n- Separate `check` task for local type checking\n- Exclude `no-import-prefix` since Val.town uses URL imports exclusively\n\n## Frontend Architecture\n\n**Always use React** for Val Town frontends. Here's the opinionated approach:\n\n### Frontend Core Principles\n\n- **HTML is just a bootstrap file** - Keep it minimal, only load React\n- **No HTML fallbacks** - JavaScript is required, period\n- **Single Page Application** - Let React handle all rendering\n- **TypeScript everywhere** - Use `.tsx` files for all components\n- **Tailwind for styling** - Use the CDN version:\n ``\n\n### React Configuration\n\n- **Use latest versions** - Import React without version constraints\n- **JSX pragma required** - Start every `.tsx` file with\n `/** @jsxImportSource https://esm.sh/react */`\n- **No explicit React import needed** - With `react-jsx` transform, only import\n hooks/specific APIs\n- **No build step** - Import directly from ESM URLs\n- **Client-side only** - No SSR, inject initial data if needed\n- **Guard browser code** - Wrap DOM access with\n `typeof document !== \"undefined\"` to prevent server-side execution\n\n## Backend Architecture\n\n### Hono Framework\n\n- Main entry point should be `backend/index.ts`\n- Export with `export default app.fetch`\n- Do NOT use Hono's serveStatic middleware\n- Use Val Town's `serveFile` utility for static assets\n- Re-throw errors in error handler for full stack traces\n\n### API Design\n\n- Create RESTful routes for CRUD operations\n- Use TypeScript interfaces for request/response types\n- Bootstrap initial data by reading and modifying HTML\n- Let errors bubble up with full context\n\n## Database with Drizzle ORM\n\nVal Town uses Turso (SQLite) under the hood. Use Drizzle ORM for type safety.\n\n### Key Concepts\n\n- **Schema-first approach** - Define all tables in `schema.ts`\n- **Single database instance** - Create one connection in `db.ts`\n- **Type-safe queries** - Use Drizzle's query builder\n- **Migrations** - Track schema changes with versioned migrations\n\n### Database Best Practices\n\n- Use singular table names (e.g., `user` not `users`)\n- Define relations for efficient querying\n- Add indexes** on foreign keys and frequently queried columns\n- Use transactions** for multi-table operations\n- Handle SQLite limitations - No complex ALTER TABLE\n- Limited ALTER TABLE support\n- Change table names instead of altering\n- Always run migrations before queries\n\n### Common Patterns\n\n- **Simple CRUD**: Use Drizzle's select, insert, update, delete\n- **Relations**: Use `db.query` for nested data\n- **Complex joins**: Use select with join methods\n- **Raw SQL**: Use `db.run(sql`)`` when needed\n\n## Testing Strategy\n\n### Testing Core Principles\n\n- Write tests first or ensure code is testable\n- Place test files next to code: `user.ts` → `user.test.ts`\n- Mock all external dependencies\n- Test behavior, not implementation\n\n### Writing Testable Code\n\n```typescript\n// BAD: Hard to test\nexport async function getUser(id: string) {\n const user = await db.select().from(userTable).where(eq(userTable.id, id));\n return user[0];\n}\n\n// GOOD: Testable with dependency injection\nexport async function getUser(id: string, dbProvider = db) {\n const user = await dbProvider.select().from(userTable).where(\n eq(userTable.id, id),\n );\n return user[0];\n}\n```\n\n### SOLID Principles\n\n1. **Single Responsibility** - Each function does one thing\n2. **Open/Closed** - Use composition over modification\n3. **Liskov Substitution** - Interfaces should be substitutable\n4. **Interface Segregation** - Small, focused interfaces\n5. **Dependency Inversion** - Depend on abstractions\n\n### Running Tests\n\n```bash\ndeno test # Run all tests\ndeno test user.test.ts # Run specific test\ndeno task quality # Includes tests in quality check\n```\n\n## TypeScript Configuration\n\n### Type Checking\n\n- Use `deno check` before deployment\n- Add explicit types for function parameters and returns\n- Define interfaces for all data structures\n- External libraries from esm.sh include types automatically\n\n### TypesSript Best Practices\n\n- Leverage TypeScript's strict mode\n- Type API responses for client-side safety\n- Use type-only imports: `import type { SomeType }`\n- Ignore Bun-specific errors if they appear\n\n## Dependency Management\n\n### Import Strategy\n\n- **Use latest versions** - No version pinning needed\n- **Import from esm.sh**: `https://esm.sh/package`\n- **Trust CDN resolution** - esm.sh handles compatibility\n- **Central deps file** - Use `deps.ts` for complex projects\n\n### Common Imports\n\n```typescript\n// React (with pragma)\n/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\n\n// Drizzle ORM\nimport { drizzle } from \"https://esm.sh/drizzle-orm/libsql\";\n\n// Hono\nimport { Hono } from \"https://esm.sh/hono\";\n```\n\n## Development Workflow\n\n### Task Commands\n\n1. **During development**: `deno task check` - Catch type errors\n2. **Before committing**: `deno task quality` - Format, lint, type check, test\n3. **To deploy**: `deno task deploy` - Quality checks then deploy\n\n### Deployment Process\n\n```bash\ndeno task deploy # Runs quality checks first\n```\n\n- Fix any issues before deployment succeeds\n- Environment variables managed in Val Town interface\n- Only deployment directory contents are uploaded\n\n## Val Town APIs\n\n### Triggers\n\n1. **HTTP Trigger** - Web APIs and endpoints\n2. **Cron Triggers** - Scheduled tasks (1 min minimum on pro)\n3. **Email Triggers** - Process incoming emails\n\n### Standard Libraries\n\n- **Blob Storage**: `import { blob } from \"https://esm.town/v/std/blob\"`\n- **SQLite**: Use Drizzle ORM instead of raw SQL\n- **OpenAI**: `import { OpenAI } from \"https://esm.town/v/std/openai\"`\n- **Email**: `import { email } from \"https://esm.town/v/std/email\"`\n\n### Utility Functions\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n**serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n**readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n**listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n## Platform Specifics\n\n### Important Limitations\n\n- **Redirects**: Use\n `new Response(null, { status: 302, headers: { Location: \"/path\" }})`\n- **No binary files** - Text files only\n- **No Deno KV** - Use SQLite instead\n- **No browser APIs** - No alert(), prompt(), confirm()\n- **Automatic CORS** - Don't import CORS middleware\n\n## Common Gotchas\n\n### Environment\n\n- Val Town runs on Deno, not Node.js\n- Shared code can't use Deno-specific APIs\n- Use esm.sh for browser/server compatibility\n\n### Hono Issues\n\n- NEVER import serveStatic middleware\n- NEVER import CORS middleware\n- Use Val Town's utilities instead\n- **ALWAYS import Val Town utilities directly** - Never create placeholder\n functions for `serveFile`, `blob`, `email`, etc. Import them from\n `https://esm.town/v/std/utils/index.ts` or their respective standard library\n modules from the start\n\n## Migration Strategy\n\n### Principles\n\n- Track migration history in dedicated table\n- Make migrations idempotent\n- Control with environment variables\n- Test thoroughly before deployment\n\n### Best Practices\n\n- Plan schema changes carefully\n- Consider performance impact\n- Backup before destructive changes\n- Remember SQLite limitations\n- Use emojis/unicode instead of images\n- Let errors bubble up with context\n- Prefer APIs without keys (e.g., open-meteo for weather)\n- Add error debugging script:\n ``\n- **Never create placeholder functions** for Val Town utilities - always import\n the real ones directly, even during development\n",[],[517],{"_103":524,"_95":525,"_156":526,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":527,"_100":32,"_164":176,"_166":528,"_167":22,"_168":-5,"_169":529,"_98":530},"b11f0d58-b1c1-11f0-9e9a-0224a6c84d84","README.md","019a1c40-a7c9-77ff-b434-a07f638db949",["D",1761410590580],"# kipclip\n\n[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/tijsteulings/tip)\n\nFind it, Kip it. Save and organize bookmarks using the AT Protocol community\nbookmark lexicon.\n\n## Features\n\n- AT Protocol OAuth authentication\n- Save bookmarks to your personal data server (PDS)\n- Automatic URL enrichment (title extraction)\n- View and manage your bookmarks\n- Uses\n [community.lexicon.bookmarks.bookmark](https://github.com/lexicon-community/lexicon/blob/main/community/lexicon/bookmarks/bookmark.json)\n schema\n\n## Architecture\n\n- **Frontend**: React + TypeScript + Tailwind CSS\n- **Backend**: Hono + AT Protocol OAuth\n- **Database**: Val.town SQLite for OAuth session storage\n- **Bookmark Storage**: User's PDS (not in appview database)\n\n## Project Structure\n\n```\nkipclip-appview/\n├── backend/\n│ ├── database/ # Drizzle schema & migrations\n│ ├── routes/ # API & static routes\n│ ├── services/ # URL enrichment\n│ └── index.ts # Main Hono app\n├── frontend/\n│ ├── components/ # React components\n│ ├── index.html # Bootstrap\n│ ├── index.tsx # React entry\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Setup\n\n### Prerequisites\n\n- Deno installed\n- Val Town account\n\n### Environment Variables\n\nCreate these in your Val.town environment:\n\n```bash\nBASE_URL=https://your-val.val.town\nCOOKIE_SECRET=your-random-secret-string-at-least-32-chars\n```\n\nVal.town provides SQLite automatically. The `COOKIE_SECRET` is required for\nencrypting OAuth session cookies.\n\n### Local Development\n\n```bash\n# Type check\ndeno task check\n\n# Run quality checks (format, lint, type check, test)\ndeno task quality\n\n# Deploy to Val.town\ndeno task deploy\n```\n\n## Mascot\n\nThe kipclip mascot is a friendly chicken carrying a bookmark bag. Replace the\nplaceholder image URL in `frontend/components/Login.tsx` with your\nCloudinary-hosted mascot image.\n\n## OAuth Flow\n\n1. User enters their AT Protocol handle\n2. App redirects to `/login?handle=user.bsky.social`\n3. OAuth package handles authentication with user's PDS\n4. Session stored in Val.town SQLite (30 days)\n5. User can now view/add bookmarks\n\n## API Endpoints\n\n- `GET /api/bookmarks` - List user's bookmarks from PDS\n- `POST /api/bookmarks` - Add new bookmark with URL enrichment\n- `DELETE /api/bookmarks/:rkey` - Delete a bookmark\n- `/api/auth/session` - Check current session\n- `/api/auth/logout` - Logout\n- `/login` - OAuth login flow\n- `/oauth/callback` - OAuth callback\n\n## Bookmark Schema\n\nBookmarks are stored using the community lexicon:\n\n```typescript\n{\n subject: string; // URL being bookmarked\n createdAt: string; // ISO 8601 datetime\n tags?: string[]; // Optional tags\n}\n```\n\nThe app enriches bookmarks with page titles by fetching and parsing HTML\nmetadata.\n\n## Development Guidelines\n\n- Keep code files under 500 lines\n- Write testable code with dependency injection\n- Test files go next to code: `service.ts` → `service.test.ts`\n- Follow SOLID principles\n- Use TypeScript for all code\n\n## License\n\nMIT\n",[],[525],{"_103":532,"_95":533,"_156":534,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":535,"_100":32,"_164":176,"_166":536,"_167":22,"_168":-5,"_169":537,"_98":538},"b11f10be-b1c1-11f0-9e9a-0224a6c84d84","deno.json","019a1c40-a7c9-77ff-b434-a71e03fab54f",["D",1761410590580],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react\",\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-import-prefix\"\n ]\n }\n },\n \"include\": [\n \"backend/\",\n \"frontend/\",\n \"shared/\"\n ],\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n },\n \"tasks\": {\n \"quality\": \"deno fmt && deno lint\",\n \"deploy\": \"deno task quality && vt push\",\n \"check\": \"deno check --allow-import backend/index.ts frontend/index.tsx\",\n \"test\": \"deno test\",\n \"fmt\": \"deno fmt\",\n \"lint\": \"deno lint\"\n }\n}\n",[],[533],"files",[153,171,181,187,193,202,210,219,225,233,241,250,256,265,276,282,288,296,304,312,320,328,336,344,352,360,368,376,385,391,400,408,416,425,431,437,443,454,460,466,476,482,491,499,507,515,523,531],"counts",{"_543":32,"_544":136,"_545":32,"_546":547},"pulls","branches","forks","envVars",{"_548":549,"_550":32},"count",2,"emptyCount","contents",[],{"_103":266,"_95":267,"_156":268,"_158":184,"_159":137,"_160":136,"_161":162,"_105":554,"_100":32,"_164":270,"_166":271,"_167":22,"_168":272,"_98":555},["D",1761410590580],[183,267],"upstreamProject",{"_103":145,"_95":96,"_111":558,"_112":559,"_109":110,"_23":560},"Save bookmarks using atproto","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6467765b-035a-4037-8ef2-4140b8d0d300/square512",{"_93":561,"_129":562},"tijs","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd2Nod2N0bE1MWFdEUlRYd083ZE5pbXJ1bDAifQ","upstreamBranch",{"_103":140,"_105":565,"_566":567,"_95":43,"_138":145,"_100":568,"_139":-5,"_141":-5,"_569":570,"_107":-5,"_150":22,"_109":110,"_149":561,"_16":147,"_148":96},["D",1760293850431],"updatedAt",["D",1762001702156],234,"lockfileKey","1762001725573-esm.town_v_tijs_kipclip-appview@234-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":577,"_151":582,"_539":727,"_176":728,"_551":730,"_731":732,"_735":-5,"_736":32,"_737":738,"_739":740},{"_103":104,"_95":96,"_105":578,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":579,"_131":580,"_134":581,"_150":22},["D",1761410590580],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[583,589,625,682,694,703,709,712,715,718,721,724],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":584,"_98":588},[585],{"_103":172,"_95":173,"_156":174,"_158":157,"_159":137,"_160":136,"_161":162,"_105":175,"_100":32,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":586,"_98":587},[],[155,173],[155],{"_103":182,"_95":183,"_156":184,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":185,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":590,"_98":624},[591,603,615,621],{"_103":188,"_95":189,"_156":190,"_158":184,"_159":137,"_160":136,"_161":162,"_105":191,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":592,"_98":602},[593,596,599],{"_103":194,"_95":195,"_156":196,"_158":190,"_159":137,"_160":136,"_161":162,"_105":197,"_100":32,"_164":198,"_166":199,"_167":22,"_168":-5,"_169":594,"_98":595},[],[183,189,195],{"_103":203,"_95":204,"_156":205,"_158":190,"_159":137,"_160":136,"_161":162,"_105":206,"_100":32,"_164":198,"_166":207,"_167":22,"_168":-5,"_169":597,"_98":598},[],[183,189,204],{"_103":211,"_95":212,"_156":213,"_158":190,"_159":137,"_160":136,"_161":162,"_105":214,"_100":32,"_164":198,"_166":215,"_167":22,"_168":-5,"_169":600,"_98":601},[],[183,189,212],[183,189],{"_103":220,"_95":221,"_156":222,"_158":184,"_159":137,"_160":136,"_161":162,"_105":223,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":604,"_98":614},[605,608,611],{"_103":226,"_95":227,"_156":228,"_158":222,"_159":137,"_160":136,"_161":162,"_105":229,"_100":32,"_164":198,"_166":230,"_167":22,"_168":-5,"_169":606,"_98":607},[],[183,221,227],{"_103":234,"_95":235,"_156":236,"_158":222,"_159":137,"_160":136,"_161":162,"_105":237,"_100":32,"_164":198,"_166":238,"_167":22,"_168":-5,"_169":609,"_98":610},[],[183,221,235],{"_103":242,"_95":243,"_156":244,"_158":222,"_159":137,"_160":136,"_161":162,"_105":245,"_100":32,"_164":198,"_166":246,"_167":22,"_168":-5,"_169":612,"_98":613},[],[183,221,243],[183,221],{"_103":251,"_95":252,"_156":253,"_158":184,"_159":137,"_160":136,"_161":162,"_105":254,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":616,"_98":620},[617],{"_103":257,"_95":258,"_156":259,"_158":253,"_159":137,"_160":136,"_161":162,"_105":260,"_100":32,"_164":198,"_166":261,"_167":22,"_168":-5,"_169":618,"_98":619},[],[183,252,258],[183,252],{"_103":266,"_95":267,"_156":268,"_158":184,"_159":137,"_160":136,"_161":162,"_105":269,"_100":32,"_164":270,"_166":271,"_167":22,"_168":272,"_169":622,"_98":623},[],[183,267],[183],{"_103":277,"_95":278,"_156":279,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":280,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":626,"_98":681},[627,666,672,675,678],{"_103":283,"_95":284,"_156":285,"_158":279,"_159":137,"_160":136,"_161":162,"_105":286,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":628,"_98":665},[629,632,635,638,641,644,647,650,653,656,659,662],{"_103":289,"_95":290,"_156":291,"_158":285,"_159":137,"_160":136,"_161":162,"_105":292,"_100":32,"_164":198,"_166":293,"_167":22,"_168":-5,"_169":630,"_98":631},[],[278,284,290],{"_103":297,"_95":298,"_156":299,"_158":285,"_159":137,"_160":136,"_161":162,"_105":300,"_100":32,"_164":198,"_166":301,"_167":22,"_168":-5,"_169":633,"_98":634},[],[278,284,298],{"_103":305,"_95":306,"_156":307,"_158":285,"_159":137,"_160":136,"_161":162,"_105":308,"_100":32,"_164":198,"_166":309,"_167":22,"_168":-5,"_169":636,"_98":637},[],[278,284,306],{"_103":313,"_95":314,"_156":315,"_158":285,"_159":137,"_160":136,"_161":162,"_105":316,"_100":32,"_164":198,"_166":317,"_167":22,"_168":-5,"_169":639,"_98":640},[],[278,284,314],{"_103":321,"_95":322,"_156":323,"_158":285,"_159":137,"_160":136,"_161":162,"_105":324,"_100":32,"_164":198,"_166":325,"_167":22,"_168":-5,"_169":642,"_98":643},[],[278,284,322],{"_103":329,"_95":330,"_156":331,"_158":285,"_159":137,"_160":136,"_161":162,"_105":332,"_100":32,"_164":198,"_166":333,"_167":22,"_168":-5,"_169":645,"_98":646},[],[278,284,330],{"_103":337,"_95":338,"_156":339,"_158":285,"_159":137,"_160":136,"_161":162,"_105":340,"_100":32,"_164":198,"_166":341,"_167":22,"_168":-5,"_169":648,"_98":649},[],[278,284,338],{"_103":345,"_95":346,"_156":347,"_158":285,"_159":137,"_160":136,"_161":162,"_105":348,"_100":32,"_164":198,"_166":349,"_167":22,"_168":-5,"_169":651,"_98":652},[],[278,284,346],{"_103":353,"_95":354,"_156":355,"_158":285,"_159":137,"_160":136,"_161":162,"_105":356,"_100":32,"_164":198,"_166":357,"_167":22,"_168":-5,"_169":654,"_98":655},[],[278,284,354],{"_103":361,"_95":362,"_156":363,"_158":285,"_159":137,"_160":136,"_161":162,"_105":364,"_100":32,"_164":198,"_166":365,"_167":22,"_168":-5,"_169":657,"_98":658},[],[278,284,362],{"_103":369,"_95":370,"_156":371,"_158":285,"_159":137,"_160":136,"_161":162,"_105":372,"_100":32,"_164":198,"_166":373,"_167":22,"_168":-5,"_169":660,"_98":661},[],[278,284,370],{"_103":377,"_95":378,"_156":379,"_158":285,"_159":137,"_160":136,"_161":162,"_105":380,"_100":32,"_164":198,"_166":381,"_167":22,"_168":-5,"_169":663,"_98":664},[],[278,284,378],[278,284],{"_103":386,"_95":387,"_156":388,"_158":279,"_159":137,"_160":136,"_161":162,"_105":389,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":667,"_98":671},[668],{"_103":392,"_95":393,"_156":394,"_158":388,"_159":137,"_160":136,"_161":162,"_105":395,"_100":32,"_164":198,"_166":396,"_167":22,"_168":-5,"_169":669,"_98":670},[],[278,387,393],[278,387],{"_103":401,"_95":402,"_156":403,"_158":279,"_159":137,"_160":136,"_161":162,"_105":404,"_100":32,"_164":176,"_166":405,"_167":22,"_168":-5,"_169":673,"_98":674},[],[278,402],{"_103":409,"_95":410,"_156":411,"_158":279,"_159":137,"_160":136,"_161":162,"_105":412,"_100":32,"_164":198,"_166":413,"_167":22,"_168":-5,"_169":676,"_98":677},[],[278,410],{"_103":417,"_95":418,"_156":419,"_158":279,"_159":137,"_160":136,"_161":162,"_105":420,"_100":32,"_164":176,"_166":421,"_167":22,"_168":-5,"_169":679,"_98":680},[],[278,418],[278],{"_103":426,"_95":427,"_156":428,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":429,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":683,"_98":693},[684],{"_103":432,"_95":433,"_156":434,"_158":428,"_159":137,"_160":136,"_161":162,"_105":435,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":685,"_98":692},[686],{"_103":438,"_95":439,"_156":440,"_158":434,"_159":137,"_160":136,"_161":162,"_105":441,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":687,"_98":691},[688],{"_103":444,"_95":445,"_156":446,"_158":440,"_159":137,"_160":136,"_161":162,"_105":447,"_100":32,"_164":176,"_166":448,"_167":22,"_168":-5,"_169":689,"_98":690},[],[427,433,439,445],[427,433,439],[427,433],[427],{"_103":455,"_95":456,"_156":457,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":458,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":695,"_98":702},[696],{"_103":461,"_95":462,"_156":463,"_158":457,"_159":137,"_160":136,"_161":162,"_105":464,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":697,"_98":701},[698],{"_103":467,"_95":468,"_156":469,"_158":463,"_159":137,"_160":136,"_161":162,"_105":470,"_100":32,"_164":176,"_166":471,"_167":22,"_168":-5,"_169":699,"_98":700},[],[456,462,468],[456,462],[456],{"_103":477,"_95":478,"_156":479,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":480,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":704,"_98":708},[705],{"_103":483,"_95":484,"_156":485,"_158":479,"_159":137,"_160":136,"_161":162,"_105":486,"_100":32,"_164":198,"_166":487,"_167":22,"_168":-5,"_169":706,"_98":707},[],[478,484],[478],{"_103":492,"_95":493,"_156":494,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":495,"_100":32,"_164":176,"_166":496,"_167":22,"_168":-5,"_169":710,"_98":711},[],[493],{"_103":500,"_95":501,"_156":502,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":503,"_100":32,"_164":176,"_166":504,"_167":22,"_168":-5,"_169":713,"_98":714},[],[501],{"_103":508,"_95":509,"_156":510,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":511,"_100":32,"_164":176,"_166":512,"_167":22,"_168":-5,"_169":716,"_98":717},[],[509],{"_103":516,"_95":517,"_156":518,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":519,"_100":32,"_164":176,"_166":520,"_167":22,"_168":-5,"_169":719,"_98":720},[],[517],{"_103":524,"_95":525,"_156":526,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":527,"_100":32,"_164":176,"_166":528,"_167":22,"_168":-5,"_169":722,"_98":723},[],[525],{"_103":532,"_95":533,"_156":534,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":535,"_100":32,"_164":176,"_166":536,"_167":22,"_168":-5,"_169":725,"_98":726},[],[533],[583,585,589,591,593,596,599,603,605,608,611,615,617,621,625,627,629,632,635,638,641,644,647,650,653,656,659,662,666,668,672,675,678,682,684,686,688,694,696,698,703,705,709,712,715,718,721,724],{"_103":266,"_95":267,"_156":268,"_158":184,"_159":137,"_160":136,"_161":162,"_105":554,"_100":32,"_164":270,"_166":271,"_167":22,"_168":272,"_98":729},[183,267],[],"upstream",{"_103":140,"_105":733,"_566":734,"_95":43,"_138":145,"_100":568,"_139":-5,"_141":-5,"_569":570,"_107":-5,"_150":22,"_109":110,"_149":561,"_16":147,"_148":96},["D",1760293850431],["D",1762001702156],"pull","ahead","behind",44,"templates",[741,758],{"_103":742,"_95":743,"_105":744,"_107":-5,"_108":22,"_109":110,"_111":745,"_112":746,"_14":747,"_114":748,"_115":162,"_116":749,"_117":750,"_16":751,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":752,"_131":755,"_134":756,"_150":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,12,"e81e7335-6d4c-4764-a902-d0962bbfa9f7",{"_93":753,"_129":754},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_93":753,"_133":754},{"_103":757,"_95":43,"_100":749,"_138":742,"_139":-5,"_141":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":759,"_95":760,"_105":761,"_107":-5,"_108":22,"_109":110,"_111":762,"_112":-5,"_14":763,"_114":764,"_115":162,"_116":765,"_117":766,"_16":767,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":768,"_131":771,"_134":772,"_150":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":769,"_129":770},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":769,"_133":770},{"_103":773,"_95":43,"_100":774,"_138":759,"_139":-5,"_141":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"actionData","errors"]

nbbaier

kipclip-appview