Flowboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_107":88,"_27":53,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","server.ts","latestPath","fileId","2f4c9490-62d2-11f1-a1d4-1607ee4eb77e","name","fileType","script","content","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);\n","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer();\n","createdAt",["D",1780879150656],"branchVersion","branchId","7c7985e5-3228-475c-9c1d-efce1285a79b","id","df77f032-8bd3-4dba-b169-7bd310461392","flowboard",["D",1780879029190],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","40cc8555-89c8-4ae7-acd3-d97735d7ea2a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ea446-49e4-736d-afac-3462a6b1561a","tursoName","df77f0328bd34dbab1697bd310461392","tursoHostname","df77f0328bd34dbab1697bd310461392-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789509672838],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",15,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","adnanchaudhry","handle","displayName","Adnan chaudhry","avatar","https://lh3.googleusercontent.com/a/ACg8ocI57q6UGV4_1yNUfUXjX6ksF-QJE5r3AUFTHyOlHaV2mT37SjovNg=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":194,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":195,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":196,"_82":197,"_84":198,"_86":25},"tree",[163,166,167],"files",[163,164,165,166,167],"counts",{"_153":61,"_154":135,"_155":61,"_156":157,"_158":159},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":147,"_32":148,"_30":149,"_132":-5,"_41":42,"_40":135,"_133":143,"_38":150,"_13":61,"_33":151,"_35":-5,"_24":25,"_136":-5,"_27":152},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_133":143,"_38":144,"_13":61,"_33":20,"_35":145,"_24":25,"_136":-5,"_27":146},{"_43":131,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_133":25,"_38":134,"_13":135,"_33":34,"_35":37,"_24":25,"_136":137,"_27":138},"2d06be4f-5252-4a97-a8a2-342ee1ee16a7","parentId","latest",["D",1780879150656],1,"label","flowchart",[28],"d2039841-fc3a-465b-b636-1bc03c1e08f8","index.html","2f5196de-62d2-11f1-b32a-1607ee4eb77e",3,true,["D",1780879030159],"\n\n \n \n \n Flowboard\n \n \n \n

\n \n \n\n",[140],"310a1143-3dd9-4f7a-8cb8-e5b38ce47a24","src","2f38f8b8-62d2-11f1-bf86-1607ee4eb77e",["D",1780879029998],"directory",[148],"pulls","branches","forks","envVars",{"_160":61,"_162":61},"connections",{"_160":61,"_161":61},"count","unfilledCount","emptyCount",{"_43":147,"_32":148,"_30":149,"_132":-5,"_41":42,"_40":135,"_133":143,"_38":191,"_13":61,"_33":151,"_35":-5,"_24":25,"_136":-5,"_169":192,"_27":193},{"_43":183,"_32":184,"_30":185,"_132":149,"_41":42,"_40":186,"_133":25,"_38":187,"_13":61,"_33":34,"_35":188,"_24":25,"_136":-5,"_169":189,"_27":190},{"_43":175,"_32":176,"_30":177,"_132":149,"_41":42,"_40":178,"_133":25,"_38":179,"_13":61,"_33":20,"_35":180,"_24":25,"_136":-5,"_169":181,"_27":182},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_133":143,"_38":172,"_13":61,"_33":20,"_35":145,"_24":25,"_136":-5,"_169":173,"_27":174},{"_43":131,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_133":25,"_38":168,"_13":135,"_33":34,"_35":37,"_24":25,"_136":137,"_169":170,"_27":171},["D",1780879150656],"children",[],[28],["D",1780879030159],[],[140],"e91e3c28-929c-459b-a410-5c4a4fd7a887","styles.css","2f6ffe44-62d2-11f1-8191-1607ee4eb77e",5,["D",1780879030148],":root {\n color-scheme: light;\n font-family:\n Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: #1d2733;\n background: #f5f7f4;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#root {\n min-height: 100%;\n margin: 0;\n}\n\nbutton,\ninput,\ntextarea {\n font: inherit;\n}\n\nsvg {\n width: 1em;\n height: 1em;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2;\n}\n\nbutton {\n cursor: pointer;\n}\n\n.appShell {\n min-height: 100vh;\n padding: 18px;\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 247, 244, 0.2) 38%),\n #f5f7f4;\n}\n\n.topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n min-height: 64px;\n margin: 0 auto 16px;\n max-width: 1740px;\n}\n\n.brandBlock {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 220px;\n}\n\n.brandMark {\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border: 1px solid #ccd5c9;\n border-radius: 8px;\n color: #305849;\n background: #ffffff;\n box-shadow: 0 1px 2px rgba(33, 43, 54, 0.08);\n}\n\nh1,\np {\n margin: 0;\n}\n\nh1 {\n font-size: 1.25rem;\n line-height: 1.15;\n letter-spacing: 0;\n}\n\n.brandBlock p {\n margin-top: 3px;\n color: #65717d;\n font-size: 0.86rem;\n}\n\n.searchBox {\n display: flex;\n align-items: center;\n gap: 9px;\n width: min(420px, 45vw);\n height: 42px;\n padding: 0 12px;\n border: 1px solid #cdd7d1;\n border-radius: 8px;\n color: #607078;\n background: #ffffff;\n box-shadow: 0 1px 2px rgba(33, 43, 54, 0.06);\n}\n\n.searchBox input,\n.columnHeader input,\n.quickAdd input,\n.editorForm input,\n.editorForm textarea {\n width: 100%;\n border: 0;\n outline: 0;\n color: #1d2733;\n background: transparent;\n}\n\n.board {\n display: grid;\n grid-template-columns: repeat(5, minmax(258px, 1fr));\n gap: 12px;\n max-width: 1740px;\n margin: 0 auto;\n overflow-x: auto;\n padding-bottom: 18px;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-width: 258px;\n height: calc(100vh - 116px);\n min-height: 510px;\n border: 1px solid #d9dfd7;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.74);\n box-shadow: 0 1px 2px rgba(31, 44, 37, 0.05);\n transition:\n border-color 160ms ease,\n background 160ms ease;\n}\n\n.column.isOver {\n border-color: #7aa28e;\n background: #f7fbf8;\n}\n\n.columnHeader {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 12px 10px;\n border-bottom: 1px solid #e3e8e1;\n}\n\n.columnHeader input {\n min-width: 0;\n color: #26323d;\n font-weight: 700;\n}\n\n.columnHeader span {\n display: grid;\n place-items: center;\n min-width: 24px;\n height: 24px;\n border-radius: 999px;\n color: #596673;\n background: #eef2ec;\n font-size: 0.8rem;\n font-weight: 700;\n}\n\n.cardList {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 9px;\n min-height: 120px;\n overflow-y: auto;\n padding: 10px;\n}\n\n.card {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n width: 100%;\n min-height: 112px;\n padding: 10px 10px 11px 7px;\n border: 1px solid #dfe5dd;\n border-radius: 8px;\n color: #26313d;\n text-align: left;\n background: #ffffff;\n box-shadow: 0 1px 2px rgba(31, 44, 37, 0.07);\n}\n\n.card:hover {\n border-color: #b8c7bd;\n}\n\n.card.isDragging {\n opacity: 0.34;\n}\n\n.dragPreview {\n width: 280px;\n box-shadow: 0 18px 38px rgba(31, 44, 37, 0.2);\n}\n\n.dragGhost {\n position: fixed;\n z-index: 40;\n pointer-events: none;\n opacity: 0.92;\n box-shadow: 0 18px 38px rgba(31, 44, 37, 0.2);\n}\n\n.dragHandle {\n display: grid;\n place-items: start center;\n color: #91a09a;\n touch-action: none;\n}\n\n.cardBody {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n\n.cardBody strong {\n overflow-wrap: anywhere;\n font-size: 0.94rem;\n line-height: 1.3;\n}\n\n.description {\n display: -webkit-box;\n overflow: hidden;\n color: #65717d;\n font-size: 0.82rem;\n line-height: 1.35;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n\n.cardMeta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: auto;\n}\n\n.label,\n.dueDate {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 100%;\n min-height: 24px;\n padding: 3px 7px;\n border-radius: 999px;\n overflow-wrap: anywhere;\n color: #315345;\n background: #e7f0ea;\n font-size: 0.76rem;\n font-weight: 700;\n}\n\n.dueDate {\n color: #6d4c1f;\n background: #f3ead9;\n}\n\n.emptyState {\n display: grid;\n place-items: center;\n min-height: 92px;\n border: 1px dashed #cbd4cc;\n border-radius: 8px;\n color: #77837e;\n font-size: 0.88rem;\n}\n\n.addCardButton,\n.ghostButton,\n.primaryButton,\n.dangerButton,\n.iconButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n border: 1px solid transparent;\n border-radius: 8px;\n font-weight: 700;\n}\n\n.addCardButton {\n min-height: 38px;\n margin: 0 10px 10px;\n color: #40514b;\n background: #eef3ef;\n}\n\n.addCardButton:hover {\n background: #e3ebe5;\n}\n\n.quickAdd {\n display: grid;\n gap: 8px;\n margin: 0 10px 10px;\n padding: 9px;\n border: 1px solid #dfe5dd;\n border-radius: 8px;\n background: #ffffff;\n}\n\n.quickAdd input {\n min-height: 34px;\n}\n\n.quickAdd div,\n.editorActions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.primaryButton,\n.dangerButton,\n.ghostButton {\n min-height: 38px;\n padding: 0 12px;\n}\n\n.primaryButton {\n color: #ffffff;\n background: #315f4d;\n}\n\n.primaryButton:hover {\n background: #264e40;\n}\n\n.dangerButton {\n color: #8b2727;\n background: #fff4f2;\n border-color: #f1cac4;\n}\n\n.ghostButton {\n color: #53605a;\n background: #f5f7f4;\n border-color: #dce3da;\n}\n\n.compact {\n min-height: 32px;\n padding: 0 10px;\n font-size: 0.84rem;\n}\n\n.iconButton {\n width: 36px;\n height: 36px;\n color: #596673;\n background: #f4f6f2;\n border-color: #dbe2d9;\n}\n\n.editorPanel {\n position: fixed;\n top: 18px;\n right: 18px;\n z-index: 10;\n display: flex;\n flex-direction: column;\n width: min(410px, calc(100vw - 36px));\n max-height: calc(100vh - 36px);\n border: 1px solid #ccd6ce;\n border-radius: 8px;\n background: #ffffff;\n box-shadow: 0 24px 70px rgba(24, 33, 29, 0.22);\n}\n\n.editorHeader {\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 16px 12px;\n border-bottom: 1px solid #e3e8e1;\n}\n\n.editorHeader div {\n min-width: 0;\n}\n\n.editorHeader span {\n display: block;\n margin-bottom: 3px;\n color: #6f7c76;\n font-size: 0.78rem;\n font-weight: 800;\n text-transform: uppercase;\n}\n\n.editorHeader strong {\n display: block;\n overflow-wrap: anywhere;\n font-size: 1.04rem;\n}\n\n.editorForm {\n display: grid;\n gap: 14px;\n overflow-y: auto;\n padding: 16px;\n}\n\n.editorForm label {\n display: grid;\n gap: 7px;\n color: #56635d;\n font-size: 0.82rem;\n font-weight: 800;\n}\n\n.editorForm input,\n.editorForm textarea {\n min-height: 40px;\n padding: 9px 10px;\n border: 1px solid #d5ddd3;\n border-radius: 8px;\n color: #1d2733;\n background: #fbfcfa;\n font-weight: 500;\n resize: vertical;\n}\n\n@media (max-width: 1180px) {\n .board {\n grid-template-columns: repeat(5, 272px);\n }\n}\n\n@media (max-width: 760px) {\n .appShell {\n padding: 12px;\n }\n\n .topbar {\n align-items: stretch;\n flex-direction: column;\n }\n\n .searchBox {\n width: 100%;\n }\n\n .board {\n grid-template-columns: repeat(5, 82vw);\n }\n\n .column {\n height: calc(100vh - 164px);\n min-width: 82vw;\n }\n\n .editorPanel {\n top: auto;\n right: 8px;\n bottom: 8px;\n left: 8px;\n width: auto;\n max-height: 80vh;\n }\n}\n",[],[148,176],"7c413ec3-2bfb-4092-b09b-ba42a6f439b7","app.js","2f609436-62d2-11f1-a748-1607ee4eb77e",4,["D",1780879030262],"const STORAGE_KEY = \"kanban-board:v1\";\n\nconst columnSeeds = [\n [\"backlog\", \"Backlog\"],\n [\"todo\", \"To Do\"],\n [\"progress\", \"In Progress\"],\n [\"review\", \"Review\"],\n [\"done\", \"Done\"],\n];\n\nconst state = {\n board: loadBoard(),\n query: \"\",\n selectedCardId: null,\n creatingColumnId: null,\n draggedCardId: null,\n};\n\nconst root = document.querySelector(\"#root\");\n\nfunction uid() {\n if (crypto.randomUUID) return crypto.randomUUID();\n return `id-${Date.now()}-${Math.random().toString(16).slice(2)}`;\n}\n\nfunction timestamp() {\n return new Date().toISOString();\n}\n\nfunction makeCard(title, description = \"\", labels = [], dueDate = \"\") {\n const createdAt = timestamp();\n return {\n id: uid(),\n title,\n description,\n labels,\n dueDate,\n createdAt,\n updatedAt: createdAt,\n };\n}\n\nfunction starterBoard() {\n const cards = [\n makeCard(\n \"Map onboarding checklist\",\n \"Write down the steps a new teammate follows from first login to first completed task.\",\n [\"Ops\", \"Docs\"],\n \"2026-06-12\",\n ),\n makeCard(\n \"Design empty states\",\n \"Create concise states for columns with no matching cards and the first-run board.\",\n [\"Design\"],\n ),\n makeCard(\n \"Review sprint risks\",\n \"Capture blockers, owners, and due dates before the next planning session.\",\n [\"Planning\", \"High\"],\n \"2026-06-10\",\n ),\n makeCard(\n \"QA drag behavior\",\n \"Check card ordering, cross-column drops, and mobile scrolling around drag handles.\",\n [\"QA\"],\n ),\n makeCard(\n \"Publish v1 notes\",\n \"Summarize what shipped and call out the local-only data model.\",\n [\"Release\"],\n ),\n ];\n\n return {\n columns: columnSeeds.map(([id, title], index) => ({\n id,\n title,\n cardIds:\n index === 0\n ? [cards[0].id, cards[1].id]\n : index === 1\n ? [cards[2].id]\n : index === 2\n ? [cards[3].id]\n : index === 3\n ? [cards[4].id]\n : [],\n })),\n cards: Object.fromEntries(cards.map((card) => [card.id, card])),\n };\n}\n\nfunction isBoard(value) {\n return (\n value &&\n Array.isArray(value.columns) &&\n value.columns.every(\n (column) =>\n typeof column.id === \"string\" &&\n typeof column.title === \"string\" &&\n Array.isArray(column.cardIds),\n ) &&\n value.cards &&\n typeof value.cards === \"object\"\n );\n}\n\nfunction loadBoard() {\n try {\n const stored = localStorage.getItem(STORAGE_KEY);\n if (!stored) return starterBoard();\n const parsed = JSON.parse(stored);\n return isBoard(parsed) ? parsed : starterBoard();\n } catch {\n return starterBoard();\n }\n}\n\nfunction saveBoard() {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state.board));\n}\n\nfunction render() {\n const visibleIds = getVisibleCardIds();\n const totalCards = Object.keys(state.board.cards).length;\n const visibleCards = visibleIds ? visibleIds.size : totalCards;\n const selectedCard = state.selectedCardId ? state.board.cards[state.selectedCardId] : null;\n\n root.innerHTML = `\n

\n \n

\n ${state.board.columns.map((column) => renderColumn(column, visibleIds)).join(\"\")}\n

\n ${selectedCard ? renderEditor(selectedCard) : \"\"}\n

\n `;\n\n attachEvents();\n}\n\nfunction renderColumn(column, visibleIds) {\n const cards = column.cardIds\n .filter((cardId) => !visibleIds || visibleIds.has(cardId))\n .map((cardId) => state.board.cards[cardId])\n .filter(Boolean);\n\n return `\n

\n \n ${cards.length}\n

\n ${cards.map(renderCard).join(\"\")}\n ${cards.length === 0 ? '

No matching cards

' : \"\"}\n

\n ${\n state.creatingColumnId === column.id\n ? renderQuickAdd(column.id)\n : ``\n }\n

\n `;\n}\n\nfunction renderCard(card) {\n return `\n \n `;\n}\n\nfunction renderQuickAdd(columnId) {\n return `\n \n `;\n}\n\nfunction renderEditor(card) {\n return `\n \n `;\n}\n\nfunction attachEvents() {\n root.querySelector(\"[data-action='search']\").addEventListener(\"input\", (event) => {\n state.query = event.target.value;\n render();\n root.querySelector(\"[data-action='search']\").focus();\n });\n\n root.querySelectorAll(\"[data-action='rename-column']\").forEach((input) => {\n input.addEventListener(\"change\", (event) => {\n const column = findColumn(event.target.dataset.columnId);\n if (!column) return;\n column.title = event.target.value.trim() || column.title;\n saveBoard();\n render();\n });\n });\n\n root.querySelectorAll(\"[data-action='open-card']\").forEach((button) => {\n button.addEventListener(\"click\", (event) => {\n if (event.defaultPrevented) return;\n state.selectedCardId = button.dataset.cardId;\n render();\n });\n });\n\n root.querySelectorAll(\"[data-action='start-create']\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n state.creatingColumnId = button.dataset.columnId;\n render();\n root.querySelector(\"[data-new-card-input]\")?.focus();\n });\n });\n\n root.querySelector(\"[data-action='cancel-create']\")?.addEventListener(\"click\", () => {\n state.creatingColumnId = null;\n render();\n });\n\n root.querySelectorAll(\"[data-action='add-card']\").forEach((form) => {\n form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n const input = form.querySelector(\"[data-new-card-input]\");\n const title = input.value.trim();\n if (!title) return;\n const card = makeCard(title);\n const column = findColumn(form.dataset.columnId);\n column.cardIds.unshift(card.id);\n state.board.cards[card.id] = card;\n state.creatingColumnId = null;\n state.selectedCardId = card.id;\n saveBoard();\n render();\n });\n });\n\n root.querySelector(\"[data-action='close-editor']\")?.addEventListener(\"click\", () => {\n state.selectedCardId = null;\n render();\n });\n\n root.querySelector(\"[data-action='save-card']\")?.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n const card = state.board.cards[state.selectedCardId];\n const form = new FormData(event.target);\n card.title = String(form.get(\"title\")).trim();\n card.description = String(form.get(\"description\")).trim();\n card.labels = String(form.get(\"labels\"))\n .split(\",\")\n .map((label) => label.trim())\n .filter(Boolean)\n .slice(0, 5);\n card.dueDate = String(form.get(\"dueDate\"));\n card.updatedAt = timestamp();\n saveBoard();\n render();\n });\n\n root.querySelector(\"[data-action='delete-card']\")?.addEventListener(\"click\", () => {\n const cardId = state.selectedCardId;\n delete state.board.cards[cardId];\n state.board.columns.forEach((column) => {\n column.cardIds = column.cardIds.filter((id) => id !== cardId);\n });\n state.selectedCardId = null;\n saveBoard();\n render();\n });\n\n attachDragEvents();\n attachPointerDragEvents();\n}\n\nfunction attachDragEvents() {\n root.querySelectorAll(\"[data-card-id]\").forEach((cardElement) => {\n cardElement.addEventListener(\"dragstart\", (event) => {\n state.draggedCardId = cardElement.dataset.cardId;\n event.dataTransfer.effectAllowed = \"move\";\n event.dataTransfer.setData(\"text/plain\", state.draggedCardId);\n cardElement.classList.add(\"isDragging\");\n });\n\n cardElement.addEventListener(\"dragend\", () => {\n state.draggedCardId = null;\n cardElement.classList.remove(\"isDragging\");\n root.querySelectorAll(\".column\").forEach((column) => column.classList.remove(\"isOver\"));\n });\n });\n\n root.querySelectorAll(\"[data-card-list]\").forEach((list) => {\n list.addEventListener(\"dragover\", (event) => {\n event.preventDefault();\n list.closest(\".column\")?.classList.add(\"isOver\");\n });\n\n list.addEventListener(\"dragleave\", () => {\n list.closest(\".column\")?.classList.remove(\"isOver\");\n });\n\n list.addEventListener(\"drop\", (event) => {\n event.preventDefault();\n const cardId = state.draggedCardId || event.dataTransfer.getData(\"text/plain\");\n const targetColumn = findColumn(list.dataset.cardList);\n const beforeCard = event.target.closest(\"[data-card-id]\");\n moveCard(cardId, targetColumn.id, beforeCard?.dataset.cardId || null);\n saveBoard();\n render();\n });\n });\n}\n\nfunction attachPointerDragEvents() {\n root.querySelectorAll(\"[data-drag-handle]\").forEach((handle) => {\n handle.addEventListener(\"pointerdown\", (event) => {\n event.preventDefault();\n event.stopPropagation();\n const cardId = handle.dataset.dragHandle;\n const cardElement = handle.closest(\"[data-card-id]\");\n const startBox = cardElement.getBoundingClientRect();\n const ghost = cardElement.cloneNode(true);\n let moved = false;\n\n state.draggedCardId = cardId;\n cardElement.classList.add(\"isDragging\");\n ghost.classList.add(\"dragGhost\");\n ghost.style.width = `${startBox.width}px`;\n ghost.style.left = `${startBox.left}px`;\n ghost.style.top = `${startBox.top}px`;\n document.body.append(ghost);\n\n const moveGhost = (clientX, clientY) => {\n ghost.style.transform = `translate(${clientX - startBox.left - 18}px, ${clientY - startBox.top - 18}px)`;\n };\n\n const onPointerMove = (moveEvent) => {\n moved = true;\n moveGhost(moveEvent.clientX, moveEvent.clientY);\n root.querySelectorAll(\".column\").forEach((column) => column.classList.remove(\"isOver\"));\n document.elementFromPoint(moveEvent.clientX, moveEvent.clientY)?.closest(\".column\")?.classList.add(\"isOver\");\n };\n\n const onPointerUp = (upEvent) => {\n document.removeEventListener(\"pointermove\", onPointerMove);\n document.removeEventListener(\"pointerup\", onPointerUp);\n const target = document.elementFromPoint(upEvent.clientX, upEvent.clientY);\n const targetColumn = target?.closest(\"[data-column-id]\")?.dataset.columnId;\n const beforeCardId = target?.closest(\"[data-card-id]\")?.dataset.cardId || null;\n\n ghost.remove();\n root.querySelectorAll(\".column\").forEach((column) => column.classList.remove(\"isOver\"));\n cardElement.classList.remove(\"isDragging\");\n state.draggedCardId = null;\n\n if (moved && targetColumn) {\n moveCard(cardId, targetColumn, beforeCardId === cardId ? null : beforeCardId);\n saveBoard();\n render();\n }\n };\n\n document.addEventListener(\"pointermove\", onPointerMove);\n document.addEventListener(\"pointerup\", onPointerUp);\n });\n });\n}\n\nfunction moveCard(cardId, targetColumnId, beforeCardId) {\n if (!cardId || !state.board.cards[cardId]) return;\n state.board.columns.forEach((column) => {\n column.cardIds = column.cardIds.filter((id) => id !== cardId);\n });\n const target = findColumn(targetColumnId);\n const beforeIndex = beforeCardId ? target.cardIds.indexOf(beforeCardId) : -1;\n target.cardIds.splice(beforeIndex >= 0 ? beforeIndex : target.cardIds.length, 0, cardId);\n}\n\nfunction getVisibleCardIds() {\n const query = state.query.trim().toLowerCase();\n if (!query) return null;\n return new Set(\n Object.values(state.board.cards)\n .filter((card) =>\n [card.title, card.description, card.labels.join(\" \")]\n .join(\" \")\n .toLowerCase()\n .includes(query),\n )\n .map((card) => card.id),\n );\n}\n\nfunction findColumn(columnId) {\n return state.board.columns.find((column) => column.id === columnId);\n}\n\nfunction formatDate(value) {\n return new Intl.DateTimeFormat(undefined, { month: \"short\", day: \"numeric\" }).format(\n new Date(`${value}T00:00:00`),\n );\n}\n\nfunction escapeHtml(value) {\n return String(value)\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\");\n}\n\nfunction icon(name) {\n const icons = {\n \"layout-dashboard\":\n '',\n search:\n '',\n plus: '',\n grip: '',\n calendar:\n '',\n x: '',\n trash:\n '',\n check: '',\n };\n return icons[name] || \"\";\n}\n\nrender();\n",[],[148,184],["D",1780879029998],[164,165],[148],["D",1780879029190],["D",1789509672838],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":232,"_233":234,"_235":236,"_237":25,"_238":25,"_239":25,"_240":143,"_241":-5,"_242":-7,"_243":-7,"_244":61,"_245":25,"_246":25,"_247":-5,"_248":25,"_249":25,"_250":25,"_251":-5},"ENV",{"_203":204,"_205":206,"_207":88,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v6