Flowboard

\\n \\n \\n\\n\", type: \"text/html; charset=utf-8\" }],\n [\"/index.html\", { content: \"\\n\\n \\n \\n \\n Flowboard\\n \\n \\n \\n

\\n \\n \\n\\n\", type: \"text/html; charset=utf-8\" }],\n [\"/src/styles.css\", { content: \":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 cursor: grab;\\n user-select: none;\\n touch-action: none;\\n}\\n\\n.editorPanel.isMoving .editorHeader {\\n cursor: grabbing;\\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 .editorHeader {\\n cursor: default;\\n touch-action: auto;\\n }\\n}\\n\", type: \"text/css; charset=utf-8\" }],\n [\"/src/app.js\", { content: \"const STORAGE_KEY = \\\"kanban-board:v1\\\";\\nconst API_BOARD_ENDPOINT = \\\"/api/board\\\";\\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 editorPosition: null,\\n storageStatus: \\\"Local draft\\\",\\n remoteStorage: false,\\n isSaving: false,\\n lastSyncedBoard: \\\"\\\",\\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 if (state.remoteStorage) {\\n saveRemoteBoard();\\n }\\n}\\n\\nasync function loadRemoteBoard() {\\n try {\\n const response = await fetch(API_BOARD_ENDPOINT, {\\n headers: { accept: \\\"application/json\\\" },\\n });\\n if (!response.ok) throw new Error(`Board load failed: ${response.status}`);\\n const data = await response.json();\\n if (!isBoard(data.board)) throw new Error(\\\"Invalid remote board\\\");\\n state.board = data.board;\\n state.remoteStorage = true;\\n state.lastSyncedBoard = JSON.stringify(data.board);\\n state.storageStatus = \\\"Synced with Val Town SQLite\\\";\\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state.board));\\n render();\\n } catch {\\n state.remoteStorage = false;\\n state.storageStatus = \\\"Saved in this browser\\\";\\n render();\\n }\\n}\\n\\nlet saveTimer;\\n\\nfunction saveRemoteBoard() {\\n clearTimeout(saveTimer);\\n state.storageStatus = \\\"Saving to Val Town SQLite...\\\";\\n saveTimer = setTimeout(async () => {\\n try {\\n state.isSaving = true;\\n const response = await fetch(API_BOARD_ENDPOINT, {\\n method: \\\"PUT\\\",\\n headers: { \\\"content-type\\\": \\\"application/json\\\" },\\n body: JSON.stringify({ board: state.board }),\\n });\\n if (!response.ok) throw new Error(`Board save failed: ${response.status}`);\\n state.lastSyncedBoard = JSON.stringify(state.board);\\n state.storageStatus = \\\"Synced with Val Town SQLite\\\";\\n render();\\n } catch {\\n state.storageStatus = \\\"Offline changes saved locally\\\";\\n render();\\n } finally {\\n state.isSaving = false;\\n }\\n }, 250);\\n}\\n\\nasync function syncRemoteBoard() {\\n if (!state.remoteStorage || state.isSaving || state.selectedCardId) return;\\n\\n try {\\n const response = await fetch(API_BOARD_ENDPOINT, {\\n headers: { accept: \\\"application/json\\\" },\\n });\\n if (!response.ok) throw new Error(`Board sync failed: ${response.status}`);\\n const data = await response.json();\\n if (!isBoard(data.board)) throw new Error(\\\"Invalid remote board\\\");\\n\\n const remoteBoard = JSON.stringify(data.board);\\n const localBoard = JSON.stringify(state.board);\\n if (remoteBoard !== state.lastSyncedBoard && localBoard === state.lastSyncedBoard) {\\n state.board = data.board;\\n state.lastSyncedBoard = remoteBoard;\\n state.storageStatus = \\\"Live sync updated\\\";\\n localStorage.setItem(STORAGE_KEY, remoteBoard);\\n render();\\n return;\\n }\\n\\n state.lastSyncedBoard = remoteBoard;\\n } catch {\\n state.storageStatus = \\\"Live sync paused\\\";\\n render();\\n }\\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 \\n ${cards.length}\\n

\\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 const positionStyle = state.editorPosition\\n ? ` style=\\\"left:${state.editorPosition.x}px; top:${state.editorPosition.y}px; right:auto;\\\"`\\n : \\\"\\\";\\n\\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 state.selectedCardId = null;\\n state.editorPosition = null;\\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 attachEditorDragEvents();\\n}\\n\\nfunction attachEditorDragEvents() {\\n const header = root.querySelector(\\\"[data-action='drag-editor']\\\");\\n const panel = root.querySelector(\\\".editorPanel\\\");\\n if (!header || !panel) return;\\n\\n header.addEventListener(\\\"pointerdown\\\", (event) => {\\n if (event.target.closest(\\\"button\\\")) return;\\n\\n event.preventDefault();\\n const box = panel.getBoundingClientRect();\\n const offsetX = event.clientX - box.left;\\n const offsetY = event.clientY - box.top;\\n panel.classList.add(\\\"isMoving\\\");\\n\\n const onPointerMove = (moveEvent) => {\\n const width = panel.offsetWidth;\\n const height = panel.offsetHeight;\\n const x = Math.min(Math.max(8, moveEvent.clientX - offsetX), window.innerWidth - width - 8);\\n const y = Math.min(Math.max(8, moveEvent.clientY - offsetY), window.innerHeight - height - 8);\\n state.editorPosition = { x, y };\\n panel.style.left = `${x}px`;\\n panel.style.top = `${y}px`;\\n panel.style.right = \\\"auto\\\";\\n panel.style.bottom = \\\"auto\\\";\\n };\\n\\n const onPointerUp = () => {\\n panel.classList.remove(\\\"isMoving\\\");\\n document.removeEventListener(\\\"pointermove\\\", onPointerMove);\\n document.removeEventListener(\\\"pointerup\\\", onPointerUp);\\n };\\n\\n document.addEventListener(\\\"pointermove\\\", onPointerMove);\\n document.addEventListener(\\\"pointerup\\\", onPointerUp);\\n });\\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();\\nloadRemoteBoard();\\nsetInterval(syncRemoteBoard, 2000);\\n\", type: \"text/javascript; charset=utf-8\" }],\n]);\n\nconst DEFAULT_BOARD = {\n \"columns\": [\n {\n \"id\": \"backlog\",\n \"title\": \"Backlog\",\n \"cardIds\": [\n \"seed-onboarding\",\n \"seed-empty-states\"\n ]\n },\n {\n \"id\": \"todo\",\n \"title\": \"To Do\",\n \"cardIds\": [\n \"seed-risks\"\n ]\n },\n {\n \"id\": \"progress\",\n \"title\": \"In Progress\",\n \"cardIds\": [\n \"seed-drag\"\n ]\n },\n {\n \"id\": \"review\",\n \"title\": \"Review\",\n \"cardIds\": [\n \"seed-release\"\n ]\n },\n {\n \"id\": \"done\",\n \"title\": \"Done\",\n \"cardIds\": []\n }\n ],\n \"cards\": {\n \"seed-onboarding\": {\n \"id\": \"seed-onboarding\",\n \"title\": \"Map onboarding checklist\",\n \"description\": \"Write down the steps a new teammate follows from first login to first completed task.\",\n \"labels\": [\n \"Ops\",\n \"Docs\"\n ],\n \"dueDate\": \"2026-06-12\",\n \"createdAt\": \"2026-06-08T00:00:00.000Z\",\n \"updatedAt\": \"2026-06-08T00:00:00.000Z\"\n },\n \"seed-empty-states\": {\n \"id\": \"seed-empty-states\",\n \"title\": \"Design empty states\",\n \"description\": \"Create concise states for columns with no matching cards and the first-run board.\",\n \"labels\": [\n \"Design\"\n ],\n \"dueDate\": \"\",\n \"createdAt\": \"2026-06-08T00:00:00.000Z\",\n \"updatedAt\": \"2026-06-08T00:00:00.000Z\"\n },\n \"seed-risks\": {\n \"id\": \"seed-risks\",\n \"title\": \"Review sprint risks\",\n \"description\": \"Capture blockers, owners, and due dates before the next planning session.\",\n \"labels\": [\n \"Planning\",\n \"High\"\n ],\n \"dueDate\": \"2026-06-10\",\n \"createdAt\": \"2026-06-08T00:00:00.000Z\",\n \"updatedAt\": \"2026-06-08T00:00:00.000Z\"\n },\n \"seed-drag\": {\n \"id\": \"seed-drag\",\n \"title\": \"QA drag behavior\",\n \"description\": \"Check card ordering, cross-column drops, and mobile scrolling around drag handles.\",\n \"labels\": [\n \"QA\"\n ],\n \"dueDate\": \"\",\n \"createdAt\": \"2026-06-08T00:00:00.000Z\",\n \"updatedAt\": \"2026-06-08T00:00:00.000Z\"\n },\n \"seed-release\": {\n \"id\": \"seed-release\",\n \"title\": \"Publish v1 notes\",\n \"description\": \"Summarize what shipped and call out the Val Town SQLite-backed board.\",\n \"labels\": [\n \"Release\"\n ],\n \"dueDate\": \"\",\n \"createdAt\": \"2026-06-08T00:00:00.000Z\",\n \"updatedAt\": \"2026-06-08T00:00:00.000Z\"\n }\n }\n};\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"content-type\": \"application/json; charset=utf-8\",\n \"access-control-allow-origin\": \"*\",\n \"access-control-allow-methods\": \"GET,PUT,OPTIONS\",\n \"access-control-allow-headers\": \"content-type\",\n },\n });\n}\n\nfunction isBoard(value: unknown): boolean {\n const board = value as { columns?: unknown; cards?: unknown };\n return Boolean(\n board &&\n Array.isArray(board.columns) &&\n board.columns.every((column: any) =>\n column &&\n typeof column.id === \"string\" &&\n typeof column.title === \"string\" &&\n Array.isArray(column.cardIds)\n ) &&\n board.cards &&\n typeof board.cards === \"object\" &&\n !Array.isArray(board.cards),\n );\n}\n\nasync function ensureBoardTable(): Promise {\n await sqlite.execute(\n `create table if not exists flowboard_state(\n key text primary key,\n board_json text not null,\n updated_at text not null\n )`,\n );\n}\n\nasync function readBoard(): Promise {\n await ensureBoardTable();\n const result = await sqlite.execute({\n sql: \"select board_json from flowboard_state where key = ?\",\n args: [\"default\"],\n });\n\n const row = result.rows[0] as { board_json?: string } | undefined;\n if (row?.board_json) {\n try {\n const parsed = JSON.parse(row.board_json);\n if (isBoard(parsed)) return parsed;\n } catch {\n // Replace invalid stored state below.\n }\n }\n\n await writeBoard(DEFAULT_BOARD);\n return DEFAULT_BOARD;\n}\n\nasync function writeBoard(board: unknown): Promise {\n if (!isBoard(board)) throw new Error(\"Invalid board shape\");\n await ensureBoardTable();\n await sqlite.execute({\n sql: `insert into flowboard_state(key, board_json, updated_at)\n values (?, ?, datetime('now'))\n on conflict(key) do update set\n board_json = excluded.board_json,\n updated_at = excluded.updated_at`,\n args: [\"default\", JSON.stringify(board)],\n });\n}\n\nasync function handleBoardApi(request: Request): Promise {\n if (request.method === \"OPTIONS\") return json({ ok: true });\n\n if (request.method === \"GET\") {\n const board = await readBoard();\n return json({ board });\n }\n\n if (request.method === \"PUT\") {\n const body = await request.json().catch(() => null) as { board?: unknown } | null;\n if (!body || !isBoard(body.board)) return json({ error: \"Invalid board\" }, 400);\n await writeBoard(body.board);\n return json({ ok: true, board: body.board });\n }\n\n return json({ error: \"Method not allowed\" }, 405);\n}\n\nexport default async function handler(request: Request): Promise {\n const path = new URL(request.url).pathname;\n\n if (path === \"/api/board\") {\n return await handleBoardApi(request);\n }\n\n const file = files.get(path) ?? files.get(\"/\");\n return new Response(file!.content, {\n headers: {\n \"content-type\": file!.type,\n \"cache-control\": \"public, max-age=60\",\n },\n });\n}\n","label","flowchart",[154],"d2039841-fc3a-465b-b636-1bc03c1e08f8","index.html","2f5196de-62d2-11f1-b32a-1607ee4eb77e",3,["D",1780879030159],"\n\n \n \n \n Flowboard\n \n \n \n

\n \n \n\n",[168],"310a1143-3dd9-4f7a-8cb8-e5b38ce47a24","src","2f38f8b8-62d2-11f1-bf86-1607ee4eb77e",1,["D",1780879029998],"directory",[175],"pulls","branches","forks","envVars",{"_188":26,"_190":26},"connections",{"_188":26,"_189":26},"count","unfilledCount","emptyCount",{"_33":174,"_13":175,"_62":176,"_43":-5,"_35":36,"_156":177,"_158":77,"_37":220,"_39":26,"_64":179,"_162":-5,"_66":24,"_164":-5,"_197":221,"_17":222},{"_33":211,"_13":212,"_62":213,"_43":176,"_35":36,"_156":214,"_158":77,"_37":215,"_39":216,"_64":65,"_162":217,"_66":24,"_164":-5,"_197":218,"_17":219},{"_33":203,"_13":204,"_62":205,"_43":176,"_35":36,"_156":206,"_158":77,"_37":207,"_39":177,"_64":21,"_162":208,"_66":24,"_164":-5,"_197":209,"_17":210},{"_33":167,"_13":168,"_62":169,"_43":-5,"_35":36,"_156":170,"_158":77,"_37":200,"_39":26,"_64":21,"_162":172,"_66":24,"_164":-5,"_197":201,"_17":202},{"_33":153,"_13":154,"_62":155,"_43":-5,"_35":36,"_156":157,"_158":77,"_37":196,"_39":160,"_64":161,"_162":163,"_66":24,"_164":165,"_197":198,"_17":199},["D",1780881947307],"children",[],[154],["D",1780879030159],[],[168],"cac4199c-5c58-493f-a0e8-83f5a5e5e5c6","styles.css","2f6ffe44-62d2-11f1-8191-1607ee4eb77e",13,["D",1780881947400],":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 cursor: grab;\n user-select: none;\n touch-action: none;\n}\n\n.editorPanel.isMoving .editorHeader {\n cursor: grabbing;\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 .editorHeader {\n cursor: default;\n touch-action: auto;\n }\n}\n",[],[175,204],"cdb20592-f308-48ae-a4f6-10d3ba1359b2","app.js","2f609436-62d2-11f1-a748-1607ee4eb77e",11,["D",1780881947306],2,"const STORAGE_KEY = \"kanban-board:v1\";\nconst API_BOARD_ENDPOINT = \"/api/board\";\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 editorPosition: null,\n storageStatus: \"Local draft\",\n remoteStorage: false,\n isSaving: false,\n lastSyncedBoard: \"\",\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 if (state.remoteStorage) {\n saveRemoteBoard();\n }\n}\n\nasync function loadRemoteBoard() {\n try {\n const response = await fetch(API_BOARD_ENDPOINT, {\n headers: { accept: \"application/json\" },\n });\n if (!response.ok) throw new Error(`Board load failed: ${response.status}`);\n const data = await response.json();\n if (!isBoard(data.board)) throw new Error(\"Invalid remote board\");\n state.board = data.board;\n state.remoteStorage = true;\n state.lastSyncedBoard = JSON.stringify(data.board);\n state.storageStatus = \"Synced with Val Town SQLite\";\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state.board));\n render();\n } catch {\n state.remoteStorage = false;\n state.storageStatus = \"Saved in this browser\";\n render();\n }\n}\n\nlet saveTimer;\n\nfunction saveRemoteBoard() {\n clearTimeout(saveTimer);\n state.storageStatus = \"Saving to Val Town SQLite...\";\n saveTimer = setTimeout(async () => {\n try {\n state.isSaving = true;\n const response = await fetch(API_BOARD_ENDPOINT, {\n method: \"PUT\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ board: state.board }),\n });\n if (!response.ok) throw new Error(`Board save failed: ${response.status}`);\n state.lastSyncedBoard = JSON.stringify(state.board);\n state.storageStatus = \"Synced with Val Town SQLite\";\n render();\n } catch {\n state.storageStatus = \"Offline changes saved locally\";\n render();\n } finally {\n state.isSaving = false;\n }\n }, 250);\n}\n\nasync function syncRemoteBoard() {\n if (!state.remoteStorage || state.isSaving || state.selectedCardId) return;\n\n try {\n const response = await fetch(API_BOARD_ENDPOINT, {\n headers: { accept: \"application/json\" },\n });\n if (!response.ok) throw new Error(`Board sync failed: ${response.status}`);\n const data = await response.json();\n if (!isBoard(data.board)) throw new Error(\"Invalid remote board\");\n\n const remoteBoard = JSON.stringify(data.board);\n const localBoard = JSON.stringify(state.board);\n if (remoteBoard !== state.lastSyncedBoard && localBoard === state.lastSyncedBoard) {\n state.board = data.board;\n state.lastSyncedBoard = remoteBoard;\n state.storageStatus = \"Live sync updated\";\n localStorage.setItem(STORAGE_KEY, remoteBoard);\n render();\n return;\n }\n\n state.lastSyncedBoard = remoteBoard;\n } catch {\n state.storageStatus = \"Live sync paused\";\n render();\n }\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 const positionStyle = state.editorPosition\n ? ` style=\"left:${state.editorPosition.x}px; top:${state.editorPosition.y}px; right:auto;\"`\n : \"\";\n\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 state.selectedCardId = null;\n state.editorPosition = null;\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 attachEditorDragEvents();\n}\n\nfunction attachEditorDragEvents() {\n const header = root.querySelector(\"[data-action='drag-editor']\");\n const panel = root.querySelector(\".editorPanel\");\n if (!header || !panel) return;\n\n header.addEventListener(\"pointerdown\", (event) => {\n if (event.target.closest(\"button\")) return;\n\n event.preventDefault();\n const box = panel.getBoundingClientRect();\n const offsetX = event.clientX - box.left;\n const offsetY = event.clientY - box.top;\n panel.classList.add(\"isMoving\");\n\n const onPointerMove = (moveEvent) => {\n const width = panel.offsetWidth;\n const height = panel.offsetHeight;\n const x = Math.min(Math.max(8, moveEvent.clientX - offsetX), window.innerWidth - width - 8);\n const y = Math.min(Math.max(8, moveEvent.clientY - offsetY), window.innerHeight - height - 8);\n state.editorPosition = { x, y };\n panel.style.left = `${x}px`;\n panel.style.top = `${y}px`;\n panel.style.right = \"auto\";\n panel.style.bottom = \"auto\";\n };\n\n const onPointerUp = () => {\n panel.classList.remove(\"isMoving\");\n document.removeEventListener(\"pointermove\", onPointerMove);\n document.removeEventListener(\"pointerup\", onPointerUp);\n };\n\n document.addEventListener(\"pointermove\", onPointerMove);\n document.addEventListener(\"pointerup\", onPointerUp);\n });\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();\nloadRemoteBoard();\nsetInterval(syncRemoteBoard, 2000);\n",[],[175,212],["D",1780879029998],[192,193],[175],["D",1780879029190],["D",1789509672838],{"_11":12,"_129":69},{"_11":12,"_124":125,"_68":69,"_30":67,"_126":127,"_128":24},{"_39":72,"_13":16,"_33":36,"_116":79,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_52":-5,"_147":261,"_262":263,"_264":265,"_266":24,"_267":24,"_268":24,"_269":77,"_270":-5,"_271":-7,"_272":-7,"_273":26,"_274":24,"_275":24,"_276":-5,"_277":24,"_278":24,"_279":24,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":16,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · new-file-5578.ts