\n \n \n \n",[150,183],"523935db9a6b9807b63e90f5e8f49d8fd5416580cfd94b9030ec65c914fa8233","d659e4d4-f85e-11ef-9bf4-569c3dd06744","fa727010-f2f6-11ef-8454-569c3dd06744",221,["D",1741027167849],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[150,183],"6a34233fe6710e2eaba3a1df366224e337dce7c3b784a54f21d436b3eac667f5","frontend/components/App.tsx",{"_32":209,"_13":200,"_90":210,"_92":211,"_94":33,"_95":212,"_97":26,"_34":213,"_40":214,"_100":101,"_102":215,"_66":48,"_104":-5,"_105":-7,"_82":216,"_107":217},{"_32":199,"_13":200,"_90":201,"_92":202,"_94":58,"_95":203,"_97":26,"_34":204,"_40":99,"_100":101,"_102":205,"_66":48,"_104":-5,"_105":-7,"_82":206,"_107":207},"469a7d70-5acb-11f0-8d6d-f69ea79377d9","App.tsx","c51574f8-fdb9-460a-91fa-36e75158900c","f72c8ed8-c3ba-4723-955f-b9d23f7104ca",6,["D",1751848955763],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Grid, GRID_SIZE, createEmptyGrid, gridToText } from \"../../shared/utils.ts\";\nimport { GridEditor } from \"./GridEditor.tsx\";\nimport { SavedGridsView } from \"./SavedGridsView.tsx\";\n\nexport function App(\n { savedGrids = [], thisProjectURL }: { savedGrids?: Grid[]; thisProjectURL?: string },\n) {\n const [currentTab, setCurrentTab] = React.useState<'editor' | 'saved'>('editor');\n const [grids, setGrids] = React.useState(savedGrids);\n\n const fetchSavedGrids = async () => {\n try {\n const response = await fetch(\"/grids\");\n const data = await response.json();\n setGrids(data);\n } catch (error) {\n console.error(\"Failed to fetch saved grids\", error);\n }\n };\n\n return (\n

🎨 4x4 Grid Editor

\n \n

\n \n \n

\n\n

\n {currentTab === 'editor' ? (\n \n ) : (\n \n )}\n

\n\n {thisProjectURL && (\n \n )}\n

\n );\n}",[150,208,200],"334859e7a0923bd42b7c04324ddc0f4cf11c2ad82130e5672c406a058b8a15d5","components","099c2f5a-fdf0-11ef-9bde-569c3dd06744","420ddac8-f2f6-11ef-8b94-569c3dd06744","3e182b80-f2f6-11ef-bcc1-569c3dd06744",222,["D",1741639286681],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

💬 Message Board!

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",[150,208,200],"2d4e5435ddba4bc23b52d45960e5b3cdfe7a3941ea919b3f98170aa03e335cab","frontend/README.md",{"_32":228,"_13":123,"_90":229,"_92":153,"_94":33,"_95":230,"_97":48,"_34":231,"_40":115,"_100":126,"_102":232,"_66":48,"_104":-5,"_105":-7,"_82":233,"_107":234},{"_32":221,"_13":123,"_90":222,"_92":144,"_94":58,"_95":223,"_97":26,"_34":224,"_40":99,"_100":126,"_102":225,"_66":48,"_104":-5,"_105":-7,"_82":226,"_107":227},"b2f8eaec-5acb-11f0-9758-f69ea79377d9","246aef39-75c5-42bb-b778-7be36e72c312",15,["D",1751849137589],"# Frontend\n\nThis is a client-side React app for the 4x4 Grid Visual Editor.\n\n## `index.html`\n\nThe **entrypoint** for the frontend is `/frontend/index.html`. This is the HTML page that is returned at the root from `/backend/index.ts`.\n\nThis HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React app.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension because browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).\n\n## `index.tsx`\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `

`.\n\nIt also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that to the ``.\n\n## `favicon.svg`\n\nAs of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory contains the React components:\n\n- `App.tsx` - Main app component with tab navigation\n- `GridEditor.tsx` - Interactive 4x4 grid editor with save functionality\n- `SavedGridsView.tsx` - Read-only view of all saved grids\n\n## Features\n\n- **Interactive Grid**: Click cells to toggle between black and white\n- **Real-time Text Output**: Shows the textual representation as you edit\n- **Save Once**: Grids can only be saved once to prevent duplicates\n- **Copy to Clipboard**: Easy copying of text representations\n- **Responsive Design**: Works on mobile and desktop",[150,123],"af02420e8cc3a1c324ec8b66738e0e48c8bd7583da9a9795fe36b9e8dc913d68","76a88448-f39d-11ef-94f2-569c3dd06744","291f68ac-f39a-11ef-af83-569c3dd06744",214,["D",1740504309787],"# Frontend\n\nThis template is a classic client-side-only React app. \n\n## `index.html`\n\nThe **entrypoint** for the frontend is `/frontend/index.html`. This is the HTML page that is returned at the root from `/backend/index.ts`.\n\nThis HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React app.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\n## `index.tsx`\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `

`.\n\nIt also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the ``.\n\n## `favicon.svg`\n\nAs of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory is where the React components are stored. They're pretty standard client-side React components.",[150,123],"8f764021914125280810bc36d58605ff1632411dba20f1029b817911972e8bd1","backend/index.ts",{"_32":249,"_13":239,"_90":250,"_92":251,"_94":33,"_95":60,"_97":48,"_34":252,"_40":253,"_100":244,"_102":254,"_66":48,"_104":-5,"_105":-7,"_82":255,"_107":256},{"_32":238,"_13":239,"_90":240,"_92":241,"_94":58,"_95":242,"_97":26,"_34":243,"_40":99,"_100":244,"_102":245,"_66":48,"_104":-5,"_105":-7,"_82":246,"_107":247},"394e49d0-5acb-11f0-a8e1-f69ea79377d9","index.ts","f7a1ab55-c2ca-4b4f-a54f-ec57c03ce174","93514baf-b2a6-4f97-b1b5-0a071667f576",4,["D",1751848933465],"http","import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getSavedGrids, saveGrid } from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Bootstrap the initial saved grids data into index.html\n // To avoid an extra request and loading flash\n const savedGrids = await getSavedGrids();\n\n // Get this project's URL, in a way that works across forks and branches\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Provide an endpoint for the frontend to get saved grids as JSON\napp.get(\"/grids\", async (c) => {\n const grids = await getSavedGrids();\n return c.json(grids);\n});\n\n// Provide an endpoint for the frontend to save a new grid\napp.post(\"/grids\", async (c) => {\n try {\n const grid = await c.req.json();\n\n if (!grid || !grid.id || !Array.isArray(grid.cells) || grid.cells.length !== 16) {\n return c.json({ error: \"Invalid grid data\" }, 400);\n }\n\n await saveGrid(grid);\n return c.json({ success: true }, 201);\n } catch (error) {\n if (error.message === \"Grid has already been saved\") {\n return c.json({ error: error.message }, 409);\n }\n throw error;\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[248,239],"baffa695da32785bc926bcc380865c5b7f7d2233dbd34bf8ce09a72ec3bc0a10","backend","4b056980-2775-11f0-8689-569c3dd06744","8aecf1b2-f2f5-11ef-bc9c-569c3dd06744","9082b594-f2f5-11ef-9927-569c3dd06744",["D",1746204517166],51,"import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getMessages, insertMessage } from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Bootstrap the initial messages data into index.html\n // To avoid an extra request and loading flash\n const initialMessages = await getMessages();\n\n // Get this project's URL, in a way that works across forks and branches\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Provide an endpoint for the frontend to get messages as JSON\napp.get(\"/messages\", async (c) => {\n const messages = await getMessages();\n return c.json(messages);\n});\n\n// Provide an endpoint for the frontend to insert a new message\napp.post(\"/messages\", async (c) => {\n const { content } = await c.req.json();\n\n if (!content || content.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n await insertMessage(content);\n\n return c.json({ success: true }, 201);\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[248,239],"2828083b4a9b648926a9b36d7097e68d07ab21ebef7587732e2a6c204ec7326f","backend/database/queries.ts",{"_32":270,"_13":261,"_90":271,"_92":272,"_94":33,"_95":273,"_97":26,"_34":274,"_40":275,"_100":101,"_102":276,"_66":48,"_104":-5,"_105":-7,"_82":277,"_107":278},{"_32":260,"_13":261,"_90":262,"_92":263,"_94":58,"_95":264,"_97":26,"_34":265,"_40":96,"_100":101,"_102":266,"_66":48,"_104":-5,"_105":-7,"_82":267,"_107":268},"c9c1e526-5acb-11f0-9822-f69ea79377d9","queries.ts","5979949f-2d7b-42aa-9829-74919ef30921","142351da-8260-45dc-a2c9-87d1b7c3f07c",17,["D",1751849175816],"import { blob } from \"https://esm.town/v/std/blob\";\nimport { type Grid } from \"../../shared/utils.ts\";\n\nconst SAVED_GRIDS_KEY = \"savedGrids\";\n\nexport async function getSavedGrids(): Promise {\n try {\n const savedGrids = await blob.getJSON(SAVED_GRIDS_KEY);\n \n // Handle legacy format or empty case\n if (!savedGrids) {\n return [];\n }\n \n // If it's already an array, return it\n if (Array.isArray(savedGrids)) {\n return savedGrids;\n }\n \n // If it's the old object format, convert it to new array format\n if (typeof savedGrids === 'object') {\n const convertedGrids: Grid[] = [];\n for (const [key, value] of Object.entries(savedGrids)) {\n if (value && typeof value === 'object' && 'gridState' in value) {\n const legacyGrid = value as any;\n convertedGrids.push({\n id: crypto.randomUUID(),\n cells: legacyGrid.gridState || new Array(16).fill(false),\n timestamp: legacyGrid.savedAt || new Date().toISOString(),\n saved: true\n });\n }\n }\n \n // Save the converted format back to blob storage\n if (convertedGrids.length > 0) {\n await blob.setJSON(SAVED_GRIDS_KEY, convertedGrids);\n }\n \n return convertedGrids;\n }\n \n return [];\n } catch (error) {\n // If the key doesn't exist, return empty array\n return [];\n }\n}\n\nexport async function saveGrid(grid: Grid): Promise {\n const savedGrids = await getSavedGrids();\n \n // Check if grid is already saved\n const existingGrid = savedGrids.find(g => g.id === grid.id);\n if (existingGrid) {\n throw new Error(\"Grid has already been saved\");\n }\n \n // Mark as saved and add to collection\n grid.saved = true;\n savedGrids.push(grid);\n \n await blob.setJSON(SAVED_GRIDS_KEY, savedGrids);\n}",[248,269,261],"92f335cd628dd7281c66bbaac3a10cd8c5f9a589d924f9f67afcbab096a63c50","database","c971d944-f38a-11ef-b3e8-569c3dd06744","128f78d8-f382-11ef-8205-569c3dd06744","f6e95df6-f381-11ef-8619-569c3dd06744",168,["D",1740496288240],22,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { createTables, tableName } from \"./migrations.ts\";\n\n// This will create the database table if it doesn't exist.\n// This will run every time the app starts up. You can\n// comment out this line for a modest (30ms) perforamnce improvement\n// on cold starts. It's left in to ensure the database tables are\n// automatically set up correctly for users who fork this app.\nawait createTables();\n\nexport async function getMessages(limit = MESSAGE_LIMIT): Promise {\n const messages = await sqlite.execute(\n `SELECT * FROM ${tableName} \n ORDER BY timestamp DESC \n LIMIT ?`,\n [limit],\n );\n return messages.rows as unknown as Message[];\n}\n\nexport async function insertMessage(content: string) {\n await sqlite.execute(\n `INSERT INTO ${tableName} (content) \n VALUES (?)`,\n [content],\n );\n}",[248,269,261],"52bc9a008ba891f034aa43270312cac81292400ab7d99d007dc7c8ea1af37ee6","backend/database/README.md",{"_32":289,"_13":123,"_90":290,"_92":272,"_94":33,"_95":291,"_97":48,"_34":292,"_40":203,"_100":126,"_102":293,"_66":48,"_104":-5,"_105":-7,"_82":294,"_107":295},{"_32":282,"_13":123,"_90":283,"_92":263,"_94":58,"_95":284,"_97":26,"_34":285,"_40":99,"_100":126,"_102":286,"_66":48,"_104":-5,"_105":-7,"_82":287,"_107":288},"a79c0012-5acb-11f0-8d8f-f69ea79377d9","8c137ceb-1bb6-4ce3-af63-d421f501e864",14,["D",1751849118526],"# Database\n\nThis app uses [Val Town Blob Storage](https://docs.val.town/std/blob/) to manage data. Every Val Town account comes with free blob storage for simple key-value data persistence. This folder contains:\n\n* `queries.ts` - functions to read and write grid data to blob storage, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Storage Strategy\n\nInstead of using SQLite, this app uses blob storage because:\n- Simpler for this use case (no complex relationships)\n- No need for database migrations\n- Easy JSON serialization/deserialization\n- Perfect for storing arrays of grid objects\n\n## Data Structure\n\nThe app stores a single blob with the key `savedGrids` containing an array of Grid objects. Each grid has:\n- `id`: unique identifier\n- `cells`: array of 16 booleans representing the 4x4 grid state\n- `timestamp`: when the grid was created\n- `saved`: whether the grid has been saved (prevents duplicate saves)\n\n## Queries\n\nThe queries file exports functions to:\n- `getSavedGrids()`: Retrieve all saved grids from blob storage\n- `saveGrid(grid)`: Add a new grid to the saved collection (with duplicate prevention)\n\nThe functions handle cases where the blob doesn't exist yet and provide proper error handling for duplicate saves.",[248,269,123],"90b7eee9454e2d2e084f308851d8e22dec0f60287ff0070fdc84b0e20a5e8851","9d2baa0e-f38a-11ef-be82-569c3dd06744","f669cfc0-f389-11ef-91df-569c3dd06744",166,["D",1740496213962],"# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.\n\nThe queries file exports functions to get and write data. It relies on shared types and data imported from the `/shared` directory.",[248,269,123],"dff234f478f20b038a86834efdc8c41b962b8677b46a5141ebbb92e6f0188aa8","backend/README.md",{"_32":306,"_13":123,"_90":307,"_92":251,"_94":33,"_95":308,"_97":48,"_34":309,"_40":22,"_100":126,"_102":310,"_66":48,"_104":-5,"_105":-7,"_82":311,"_107":312},{"_32":299,"_13":123,"_90":300,"_92":241,"_94":58,"_95":301,"_97":26,"_34":302,"_40":99,"_100":126,"_102":303,"_66":48,"_104":-5,"_105":-7,"_82":304,"_107":305},"9c7be148-5acb-11f0-8a2d-f69ea79377d9","9d4b149e-2007-4d2e-bae8-882b807d1e36",13,["D",1751849099864],"# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with Val Town's blob storage\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) as the API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. \n\nWe *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and saving grids. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.\n\n## Storage\n\nInstead of SQLite, this app uses Val Town's blob storage to persist saved grids. This is simpler for this use case and doesn't require database migrations.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",[248,123],"55b060977dc0fee32a72b1fc29ce75f71390640c263ca0e143041f3d3221cb60","a8a0ecaa-f5e2-11ef-b236-569c3dd06744","469833c0-f389-11ef-9c27-569c3dd06744",220,["D",1740753931220],"# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) as the API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. \n\nWe *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",[248,123],"f8ab454a012eb557444cff7912903199d8df92b666e76171ea63adf938537dc7",{"_32":321,"_13":123,"_90":322,"_92":-5,"_94":33,"_95":323,"_97":48,"_34":324,"_40":264,"_100":126,"_102":325,"_66":48,"_104":-5,"_105":-7,"_82":326,"_107":327},{"_32":315,"_13":123,"_90":316,"_92":-5,"_94":58,"_95":175,"_97":26,"_34":317,"_40":99,"_100":126,"_102":318,"_66":48,"_104":-5,"_105":-7,"_82":319,"_107":320},"823e2a02-5acb-11f0-a5a1-f69ea79377d9","72a1cd46-1e2a-406a-bb0f-ee8d802a3015",["D",1751849055834],"# 4x4 Grid Visual Editor\n\nA simple visual editor for creating and managing black and white 4x4 grids. Built with React, Hono, and Val Town.\n\n## Features\n\n- **Visual Grid Editor**: Click cells to toggle between black and white\n- **Text Representation**: Automatically generates a textual representation showing black cell indices and white cell count\n- **Save Functionality**: Save grids to persistent storage (grids can only be saved once)\n- **Saved Grids View**: Browse all previously saved grids in a read-only format\n- **Copy to Clipboard**: Easy copying of text representations\n\n## Project Structure\n\nThis app is broken up into three folders, corresponding to where the code in those folders run:\n\n- `backend/` - runs on Val Town serverless infrastructure in Deno\n- `frontend/` - runs in the user's browser\n- `shared/` - runs in both the frontend and backend\n\nThe entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.\n\n## Storage\n\nUses Val Town's blob storage to persist saved grids. The storage key `savedGrids` contains an array of all saved grid objects.\n\nYou can click into each of those folders to view their respective READMEs.",[123],"46704ba070aaf453566209e185f718af43d2ad0638172e8ef36c409be85faf4b","64b6dd2c-05b1-11f0-9275-569c3dd06744","4346a22c-f2f5-11ef-891c-569c3dd06744",226,["D",1742491990544],"# React Hono Val Town Project Starter Template\n\nThis is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.\n\nThis app is broken up into three folders, corresponding to where the code in those folders run:\n\n- `backend/` - runs on Val Town serverless infrastructure in Deno\n- `frontend/` - runs in the user's browser\n- `shared/` - runs in both the frontend and backend\n\nThe entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.\n\nYou can click into each of those folders to view their respective READMEs.",[123],"798045dde62a94faaa6da2e1dc260b6592e7a060ba916744101ddc9ff7690ef3",{"_82":329,"_84":330,"_86":-7},"frontend/components/MessageInput.tsx",{"_32":331,"_13":332,"_90":333,"_92":211,"_94":33,"_95":334,"_97":26,"_34":335,"_40":115,"_100":101,"_102":336,"_66":48,"_104":-5,"_105":-7,"_82":337,"_107":338},"34abf3c8-f2fc-11ef-a6a5-569c3dd06744","MessageInput.tsx","5056705e-f2f6-11ef-9d1d-569c3dd06744",87,["D",1740435050106],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const response = await fetch(\"/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content: message }),\n });\n\n if (response.ok) {\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Message submission failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a message...\"\n />\n \n \n );\n}",[150,208,332],"22e1616c1df9ba6545d1fab98523bcd266d7ae63a8da2c7c59244a2c97ae9244",{"_82":362,"_84":-7,"_86":363},{"_82":353,"_84":-7,"_86":354},{"_82":342,"_84":-7,"_86":343},"frontend/components/SavedGridsView.tsx",{"_32":344,"_13":345,"_90":346,"_92":202,"_94":58,"_95":347,"_97":26,"_34":348,"_40":349,"_100":101,"_102":350,"_66":48,"_104":-5,"_105":-7,"_82":351,"_107":352},"587fdaa8-5acb-11f0-8c87-f69ea79377d9","SavedGridsView.tsx","587fdb66-5acb-11f0-8c87-f69ea79377d9",8,["D",1751848985802],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Grid, GRID_SIZE, gridToText } from \"../../shared/utils.ts\";\n\ninterface SavedGridsViewProps {\n grids: Grid[];\n}\n\nexport function SavedGridsView({ grids }: SavedGridsViewProps) {\n if (grids.length === 0) {\n return (\n

No saved grids yet. Create and save a grid in the Editor tab!

\n );\n }\n\n return (\n

Saved Grids ({grids.length})

\n {grids.map((grid) => (\n \n ))}\n

\n );\n}\n\nfunction SavedGridItem({ grid }: { grid: Grid }) {\n const formattedDate = new Date(grid.timestamp).toLocaleString();\n const textRepresentation = gridToText(grid.cells);\n\n return (\n

\n Saved: {formattedDate}\n

\n \n

\n {grid.cells.map((isBlack, index) => (\n \n ))}\n

\n\n

\n {textRepresentation}\n \n

\n );\n}",[150,208,345],"aa28cafba47c7542b03e25ff495d65c1f403f0678360b7e61f4237554463138a","frontend/components/GridEditor.tsx",{"_32":355,"_13":356,"_90":357,"_92":202,"_94":58,"_95":115,"_97":26,"_34":358,"_40":349,"_100":101,"_102":359,"_66":48,"_104":-5,"_105":-7,"_82":360,"_107":361},"50062256-5acb-11f0-ba5c-f69ea79377d9","GridEditor.tsx","50062346-5acb-11f0-ba5c-f69ea79377d9",["D",1751848971585],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Grid, GRID_SIZE, createEmptyGrid, gridToText } from \"../../shared/utils.ts\";\n\ninterface GridEditorProps {\n onGridSaved: () => void;\n}\n\nexport function GridEditor({ onGridSaved }: GridEditorProps) {\n const [cells, setCells] = React.useState(createEmptyGrid());\n const [gridId] = React.useState(() => crypto.randomUUID());\n const [isSaved, setIsSaved] = React.useState(false);\n const [isSaving, setIsSaving] = React.useState(false);\n\n const toggleCell = (index: number) => {\n if (isSaved) return; // Don't allow editing saved grids\n \n setCells(prev => {\n const newCells = [...prev];\n newCells[index] = !newCells[index];\n return newCells;\n });\n };\n\n const resetGrid = () => {\n if (isSaved) return;\n setCells(createEmptyGrid());\n };\n\n const saveGrid = async () => {\n if (isSaved || isSaving) return;\n\n setIsSaving(true);\n try {\n const grid: Grid = {\n id: gridId,\n cells,\n timestamp: new Date().toISOString(),\n saved: false\n };\n\n const response = await fetch(\"/grids\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(grid),\n });\n\n if (response.ok) {\n setIsSaved(true);\n onGridSaved();\n } else {\n const error = await response.json();\n alert(`Failed to save grid: ${error.error}`);\n }\n } catch (error) {\n console.error(\"Failed to save grid\", error);\n alert(\"Failed to save grid\");\n } finally {\n setIsSaving(false);\n }\n };\n\n const textRepresentation = gridToText(cells);\n\n return (\n

\n {cells.map((isBlack, index) => (\n toggleCell(index)}\n title={`Cell ${index} - Click to ${isBlack ? 'make white' : 'make black'}`}\n />\n ))}\n

\n\n

\n \n \n

\n\n

Text Representation:

\n {textRepresentation}\n \n

\n\n {isSaved && (\n

\n ✅ Grid saved! This grid can no longer be edited.\n

\n )}\n

\n );\n}",[150,208,356],"7630b5476fb147bf4ddf79949e4363ef2df77653556dd9626f500068019f99bd","backend/getgrids.ts",{"_32":364,"_13":365,"_90":366,"_92":241,"_94":58,"_95":57,"_97":26,"_34":367,"_40":264,"_100":244,"_102":368,"_66":48,"_104":-5,"_105":-7,"_82":369,"_107":370},"2ee5040c-cc81-11f0-90e6-42dde27851f2","getgrids.ts","d72134b0-cbb9-11f0-9aa1-42dde27851f2",["D",1764351565800],"import { getSavedGrids } from \"./database/queries.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n\n\nconst savedGrids = await blob.getJSON(\"savedGrids\");\n\n const gridWhitesCount = grid => grid.cells.filter(x => x === false).length;\n const templateA = savedGrids.filter(x => gridWhitesCount(x) === 10)[0]\n\n\n\n\nexport default async function(request: Request) {\n return new Response(JSON.stringify(savedGrids))\n}",[248,365],"b8932c01d2372db7f7fab7c3363b70f84664913db617a04b739ab499c426c6cd",["D",1751848844056],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_409":405},"org",{"_11":12,"_402":403,"_404":405,"_376":377,"_406":407,"_408":48},"branch","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":547,"_46":-5,"_372":48,"_49":50,"_373":50,"_374":-5,"_375":-5,"_376":377,"_378":366,"_379":26,"_380":26,"_381":-5,"_382":99,"_53":383,"_384":-5,"_385":-5,"_386":-5,"_387":-5,"_388":389,"_390":389,"_391":392,"_393":392,"_394":392,"_395":389,"_396":389,"_397":548,"_399":549,"_401":550,"_47":48},"tree",[464,472,482,485],"files",[464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485],"counts",{"_454":349,"_455":99,"_456":349,"_457":458,"_459":460},"contents",[438,439,440,441],"upstreamProject",{"_32":39,"_13":56,"_374":435,"_375":-5,"_49":50,"_397":436},"upstreamBranch",{"_32":33,"_34":433,"_36":434,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740432065884],["D",1755285423526],"Example with client-side React & Hono server",{"_11":52,"_409":437},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_32":451,"_13":248,"_90":241,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":452,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_82":453},{"_32":448,"_13":150,"_90":144,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":449,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_82":450},{"_32":444,"_13":109,"_90":93,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":445,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_82":447},{"_32":315,"_13":123,"_90":316,"_92":-5,"_94":58,"_95":175,"_97":26,"_34":442,"_40":99,"_100":126,"_102":318,"_66":48,"_104":-5,"_82":443},["D",1751849055834],[123],"040d9aaa-5acb-11f0-a3bc-f69ea79377d9",["D",1751848844056],"directory",[109],"040d9668-5acb-11f0-a3bc-f69ea79377d9",["D",1751848844056],[150],"040d85ec-5acb-11f0-a3bc-f69ea79377d9",["D",1751848844056],[248],"pulls","branches","forks","envVars",{"_461":349,"_463":349},"connections",{"_461":349,"_462":349},"count","unfilledCount","emptyCount",{"_32":451,"_13":248,"_90":241,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":544,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_105":545,"_82":546},{"_32":540,"_13":269,"_90":263,"_92":241,"_94":58,"_95":99,"_97":26,"_34":541,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_105":542,"_82":543},{"_32":282,"_13":123,"_90":283,"_92":263,"_94":58,"_95":284,"_97":26,"_34":285,"_40":99,"_100":126,"_102":286,"_66":48,"_104":-5,"_105":538,"_82":539},{"_32":531,"_13":532,"_90":533,"_92":263,"_94":58,"_95":99,"_97":26,"_34":534,"_40":349,"_100":101,"_102":535,"_66":48,"_104":-5,"_105":536,"_82":537},{"_32":260,"_13":261,"_90":262,"_92":263,"_94":58,"_95":264,"_97":26,"_34":265,"_40":96,"_100":101,"_102":266,"_66":48,"_104":-5,"_105":529,"_82":530},{"_32":299,"_13":123,"_90":300,"_92":241,"_94":58,"_95":301,"_97":26,"_34":302,"_40":99,"_100":126,"_102":303,"_66":48,"_104":-5,"_105":527,"_82":528},{"_32":364,"_13":365,"_90":366,"_92":241,"_94":58,"_95":57,"_97":26,"_34":367,"_40":264,"_100":244,"_102":368,"_66":48,"_104":-5,"_105":525,"_82":526},{"_32":238,"_13":239,"_90":240,"_92":241,"_94":58,"_95":242,"_97":26,"_34":243,"_40":99,"_100":244,"_102":245,"_66":48,"_104":-5,"_105":523,"_82":524},{"_32":448,"_13":150,"_90":144,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":520,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_105":521,"_82":522},{"_32":516,"_13":208,"_90":202,"_92":144,"_94":58,"_95":99,"_97":26,"_34":517,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_105":518,"_82":519},{"_32":199,"_13":200,"_90":201,"_92":202,"_94":58,"_95":203,"_97":26,"_34":204,"_40":99,"_100":101,"_102":205,"_66":48,"_104":-5,"_105":514,"_82":515},{"_32":355,"_13":356,"_90":357,"_92":202,"_94":58,"_95":115,"_97":26,"_34":358,"_40":349,"_100":101,"_102":359,"_66":48,"_104":-5,"_105":512,"_82":513},{"_32":344,"_13":345,"_90":346,"_92":202,"_94":58,"_95":347,"_97":26,"_34":348,"_40":349,"_100":101,"_102":350,"_66":48,"_104":-5,"_105":510,"_82":511},{"_32":221,"_13":123,"_90":222,"_92":144,"_94":58,"_95":223,"_97":26,"_34":224,"_40":99,"_100":126,"_102":225,"_66":48,"_104":-5,"_105":508,"_82":509},{"_32":501,"_13":502,"_90":503,"_92":144,"_94":58,"_95":99,"_97":26,"_34":504,"_40":349,"_100":126,"_102":505,"_66":48,"_104":-5,"_105":506,"_82":507},{"_32":182,"_13":183,"_90":184,"_92":144,"_94":58,"_95":134,"_97":26,"_34":185,"_40":99,"_100":126,"_102":186,"_66":48,"_104":-5,"_105":499,"_82":500},{"_32":163,"_13":164,"_90":165,"_92":144,"_94":58,"_95":166,"_97":26,"_34":167,"_40":99,"_100":101,"_102":168,"_66":48,"_104":-5,"_105":497,"_82":498},{"_32":141,"_13":142,"_90":143,"_92":144,"_94":58,"_95":145,"_97":26,"_34":146,"_40":99,"_100":126,"_102":147,"_66":48,"_104":-5,"_105":495,"_82":496},{"_32":444,"_13":109,"_90":93,"_92":-5,"_94":58,"_95":99,"_97":26,"_34":492,"_40":349,"_100":446,"_102":-5,"_66":48,"_104":-5,"_105":493,"_82":494},{"_32":122,"_13":123,"_90":124,"_92":93,"_94":58,"_95":22,"_97":26,"_34":125,"_40":99,"_100":126,"_102":127,"_66":48,"_104":-5,"_105":490,"_82":491},{"_32":88,"_13":89,"_90":91,"_92":93,"_94":58,"_95":96,"_97":26,"_34":98,"_40":99,"_100":101,"_102":103,"_66":48,"_104":-5,"_105":488,"_82":489},{"_32":315,"_13":123,"_90":316,"_92":-5,"_94":58,"_95":175,"_97":26,"_34":317,"_40":99,"_100":126,"_102":318,"_66":48,"_104":-5,"_105":486,"_82":487},[],[123],[],[109,89],[],[109,123],["D",1751848844056],[483,484],[109],[],[150,142],[],[150,164],[],[150,183],"040d8fe2-5acb-11f0-a3bc-f69ea79377d9","favicon.svg","ebf5fedc-7cbe-4f04-bd86-069b166e11fb",["D",1751848844056],"",[],[150,502],[],[150,123],[],[150,208,345],[],[150,208,356],[],[150,208,200],"040d8aba-5acb-11f0-a3bc-f69ea79377d9",["D",1751848844056],[474,475,476],[150,208],["D",1751848844056],[473,477,478,479,480,481],[150],[],[248,239],[],[248,365],[],[248,123],[],[248,269,261],"040d6f9e-5acb-11f0-a3bc-f69ea79377d9","migrations.ts","bc96213c-425e-47b2-9017-7f21e4a785bb",["D",1751848844056],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const tableName = \"reactHonoStarter_messages\";\n\nexport async function createTables() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS ${tableName} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n /* Add any other tables or migrations you want here\n\n However, you should know that SQLite has much more limited\n support for altering existing tables as compared to other databases.\n Often it's easier to create new tables with the schema you want, and then\n copy the data over. */\n ]);\n}",[],[248,269,532],[],[248,269,123],"040d7480-5acb-11f0-a3bc-f69ea79377d9",["D",1751848844056],[466,467,468],[248,269],["D",1751848844056],[465,469,470,471],[248],["D",1751848844056],{"_11":12,"_409":405},{"_11":12,"_402":403,"_404":405,"_376":377,"_406":407,"_408":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_397":-5,"_430":584,"_585":586,"_587":588,"_589":48,"_590":48,"_591":48,"_592":26,"_593":-5,"_594":-7,"_595":-7,"_596":349,"_597":48,"_598":48,"_599":-5,"_600":48,"_601":48,"_602":48,"_603":-5},"ENV",{"_555":556,"_557":558,"_559":16,"_560":561,"_562":563,"_564":565,"_566":567,"_568":569,"_570":571,"_572":573,"_574":575,"_576":577,"_578":579,"_580":581,"_582":583},"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"]

Compare

Mergealexwein/mainintostevekrouse/main

README.md+16-2

backend/README.md+6-2

backend/database/README.md+18-9

backend/database/queries.ts+59-23

Hbackend/index.ts+23-17

frontend/README.md+16-4

frontend/components/App.tsx+45-43

frontend/index.html+1-1

frontend/index.tsx+2-2

frontend/style.css+181-25

shared/README.md+13-2

shared/utils.ts+23-3

Hbackend/getgrids.ts+16-0

frontend/components/GridEditor.tsx+117-0

frontend/components/SavedGridsView.tsx+63-0

frontend/components/MessageInput.tsx+0-39