[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_297":298,"_299":300},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.tsx","latestPath","fileId","01a09cac-8e2f-7716-b801-b7ea38740c6d","name","fileType","http","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n// In-memory state. Resets whenever the server restarts.\n// For persistence across restarts, use std/sqlite or std/blob.\nlet count = 0;\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n \n {children}\n \n \n);\n\nconst app = new Hono();\n\napp.get(\"/\", (c) =>\n c.html(\n \n

Hello from Hono JSX

\n A minimal Val Town starter.{\" \"}\n \n Remix this val.\n \n

\n Server count:{\" \"}\n {count}\n

\n \n Increment\n \n

\n Lives in memory on the server. Resets when the val restarts.\n

\n \n ,\n ));\n\napp.get(\"/about\", (c) =>\n c.html(\n \n

About

Server-rendered with Hono JSX on Val Town.

\n ,\n ));\n\n// API routes\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n\n// Serve static files\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// View source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport type { Context } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport * as db from \"./lib/db.ts\";\nimport type { BookingView, Settings, Status } from \"./lib/db.ts\";\nimport { addDays, availableSlots, isDate, isTime, nowRiyadh, toMin } from \"./lib/time.ts\";\nimport { CITIES, isLocation, normalizePhone, toLatinDigits } from \"./lib/format.ts\";\nimport { checkPassword, clientIp, endSession, requireAdmin, startSession } from \"./lib/auth.ts\";\nimport { BookingPage, BookPage, HomePage, NotFoundPage } from \"./views/public.tsx\";\nimport { BookingsAdmin, GalleryAdmin, LoginPage, ServicesAdmin, SettingsAdmin } from \"./views/admin.tsx\";\n\nconst app = new Hono();\n\ntype Body = Record;\nconst str = (b: Body, key: string, max = 500) => {\n const v = b[key];\n return typeof v === \"string\" ? v.trim().slice(0, max) : \"\";\n};\nconst int = (raw: string, min: number, max: number, fallback: number) => {\n const n = Number(toLatinDigits(raw));\n return raw !== \"\" && Number.isInteger(n) && n >= min && n <= max ? n : fallback;\n};\nconst clampPeople = (raw: string) => int(raw, 1, 6, 1);\n\nasync function render(c: Context, el: unknown, status = 200) {\n const html = await (el as { toString(): string | Promise }).toString();\n return c.html(\"\" + html, status as 200);\n}\n\napp.use(\"*\", async (c, next) => {\n await db.ensureSchema();\n await next();\n try {\n c.header(\"X-Content-Type-Options\", \"nosniff\");\n c.header(\"Referrer-Policy\", \"strict-origin-when-cross-origin\");\n if (c.req.path.startsWith(\"/admin\")) {\n c.header(\"X-Frame-Options\", \"DENY\");\n c.header(\"Cache-Control\", \"no-store\");\n }\n } catch {\n // some responses have immutable headers\n }\n});\n\n// ── Public site ─────────────────────────────────────────────\napp.get(\"/\", async (c) => {\n const [s, services, gallery] = await Promise.all([\n db.getSettings(),\n db.listServices(true),\n db.listGallery(true),\n ]);\n return render(c, );\n});\n\nfunction bookingRange(s: Settings) {\n const today = nowRiyadh().date;\n return { minDate: today, maxDate: addDays(today, s.maxDaysAhead) };\n}\n\napp.get(\"/book\", async (c) => {\n const [s, services] = await Promise.all([db.getSettings(), db.listServices(true)]);\n const values = { service_id: c.req.query(\"service\") ?? \"\", people: \"1\" };\n return render(c, );\n});\n\napp.get(\"/api/slots\", async (c) => {\n const [s, service] = await Promise.all([\n db.getSettings(),\n db.getService(Number(c.req.query(\"service\"))),\n ]);\n c.header(\"Cache-Control\", \"no-store\");\n if (!service || !service.active) return c.json({ ok: false, reason: \"الخدمة غير متاحة.\", slots: [] });\n const people = clampPeople(c.req.query(\"people\") ?? \"1\");\n return c.json(await availableSlots(c.req.query(\"date\") ?? \"\", service.duration_min * people, s));\n});\n\nconst BOOK_FIELDS = [\"service_id\", \"people\", \"location_type\", \"city\", \"date\", \"time\", \"name\", \"phone\", \"notes\"];\n\napp.post(\"/book\", async (c) => {\n const body = (await c.req.parseBody()) as Body;\n if (str(body, \"website\")) return c.redirect(\"/\"); // honeypot\n const v: Record = Object.fromEntries(BOOK_FIELDS.map((k) => [k, str(body, k, 1000)]));\n const [s, services] = await Promise.all([db.getSettings(), db.listServices(true)]);\n const fail = (error: string) =>\n render(c, , 422);\n\n const service = services.find((x) => String(x.id) === v.service_id);\n if (!service) return fail(\"اختاري الخدمة المطلوبة.\");\n const name = v.name.slice(0, 80);\n if (name.length < 2) return fail(\"اكتبي الاسم.\");\n const phone = normalizePhone(v.phone);\n if (!phone) return fail(\"رقم الجوال غير صحيح. اكتبيه مثل 05xxxxxxxx أو مع رمز الدولة.\");\n if (!isLocation(v.location_type) || (v.location_type === \"studio\" && !s.allowStudio)) {\n return fail(\"اختاري مكان الخدمة.\");\n }\n const city = CITIES.includes(v.city) ? v.city : \"\";\n if (v.location_type !== \"studio\" && !city) return fail(\"اختاري المدينة.\");\n\n const people = clampPeople(v.people);\n const duration = service.duration_min * people;\n const slots = await availableSlots(v.date, duration, s);\n if (!slots.ok) return fail(slots.reason);\n if (!slots.slots.includes(v.time)) return fail(\"الوقت المختار غير متاح، اختاري وقتاً آخر.\");\n if ((await db.countOpenBookingsByPhone(phone, nowRiyadh().date)) >= 3) {\n return fail(\"لديك عدة طلبات بانتظار التأكيد. تواصلي معنا عبر واتساب لإضافة المزيد.\");\n }\n\n const r = await db.createBooking({\n service_id: service.id,\n service_name: service.name,\n duration_min: duration,\n price: service.price == null ? null : service.price * people,\n date: v.date,\n time: v.time,\n start_min: toMin(v.time),\n name,\n phone,\n location_type: v.location_type,\n city,\n people,\n notes: v.notes,\n status: \"pending\",\n }, s.bufferMin);\n if (!r.ok) return fail(\"سبقك حجز آخر على هذا الوقت، اختاري وقتاً آخر.\");\n return c.redirect(`/b/${r.code}`);\n});\n\napp.get(\"/b/:code\", async (c) => {\n const b = await db.getBookingByCode(c.req.param(\"code\").toUpperCase());\n if (!b) return render(c, , 404);\n c.header(\"Cache-Control\", \"no-store\");\n return render(c, );\n});\n\nfunction sniffMime(b: Uint8Array) {\n if (b[0] === 0x89 && b[1] === 0x50) return \"image/png\";\n if (b[0] === 0x52 && b[1] === 0x49 && b[8] === 0x57 && b[9] === 0x45) return \"image/webp\";\n return \"image/jpeg\";\n}\n\napp.get(\"/img/:kind{gallery|brand}/:name\", async (c) => {\n try {\n const res = await blob.get(`${c.req.param(\"kind\")}/${c.req.param(\"name\")}`);\n if (!res.ok) return c.notFound();\n const bytes = new Uint8Array(await res.arrayBuffer());\n return c.body(bytes, 200, { \"Content-Type\": sniffMime(bytes), \"Cache-Control\": \"public, max-age=86400\" });\n } catch {\n return c.notFound();\n }\n});\n\napp.get(\"/robots.txt\", async (c) => {\n const s = await db.getSettings();\n return c.text(\n s.indexable ? \"User-agent: *\\nDisallow: /admin\\nDisallow: /b/\\n\" : \"User-agent: *\\nDisallow: /\\n\",\n );\n});\n\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// ── Admin ───────────────────────────────────────────────────\napp.use(\"/admin\", requireAdmin);\napp.use(\"/admin/*\", async (c, next) => {\n if (c.req.path === \"/admin/login\") return await next();\n return await requireAdmin(c, next);\n});\n\napp.get(\"/admin/login\", (c) => render(c, ));\n\napp.post(\"/admin/login\", async (c) => {\n const ip = clientIp(c);\n if ((await db.recentLoginFailures(ip)) >= 8) {\n return render(c, , 429);\n }\n const body = (await c.req.parseBody()) as Body;\n const password = typeof body.password === \"string\" ? body.password.slice(0, 200) : \"\";\n if (await checkPassword(password)) {\n await startSession(c);\n return c.redirect(\"/admin\");\n }\n await db.recordLoginFailure(ip);\n return render(c, , 401);\n});\n\napp.post(\"/admin/logout\", (c) => {\n endSession(c);\n return c.redirect(\"/admin/login\");\n});\n\nconst VIEWS: BookingView[] = [\"upcoming\", \"pending\", \"past\", \"all\"];\n\napp.get(\"/admin\", async (c) => {\n const today = nowRiyadh().date;\n const requested = c.req.query(\"view\") as BookingView;\n const view = VIEWS.includes(requested) ? requested : \"upcoming\";\n const [bookings, stats, services] = await Promise.all([\n db.listBookings(view, today),\n db.bookingStats(today, addDays(today, 7)),\n db.listServices(false),\n ]);\n return render(\n c,\n ,\n );\n});\n\napp.post(\"/admin/bookings/new\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const fail = (code: string) => c.redirect(`/admin?err=${code}`);\n const service = await db.getService(Number(str(b, \"service_id\")));\n if (!service) return fail(\"service\");\n const date = str(b, \"date\");\n if (!isDate(date)) return fail(\"date\");\n const time = str(b, \"time\").slice(0, 5);\n if (!isTime(time)) return fail(\"time\");\n const name = str(b, \"name\", 80);\n if (name.length < 2) return fail(\"name\");\n const phone = normalizePhone(str(b, \"phone\"));\n if (!phone) return fail(\"phone\");\n const people = clampPeople(str(b, \"people\"));\n const location = str(b, \"location_type\");\n const city = str(b, \"city\");\n const s = await db.getSettings();\n const r = await db.createBooking({\n service_id: service.id,\n service_name: service.name,\n duration_min: service.duration_min * people,\n price: service.price == null ? null : service.price * people,\n date,\n time,\n start_min: toMin(time),\n name,\n phone,\n location_type: isLocation(location) ? location : \"home\",\n city: CITIES.includes(city) ? city : \"\",\n people,\n notes: str(b, \"notes\", 1000),\n status: str(b, \"status\") === \"pending\" ? \"pending\" : \"confirmed\",\n }, s.bufferMin);\n return r.ok ? c.redirect(\"/admin?ok=added\") : fail(\"taken\");\n});\n\napp.post(\"/admin/bookings/:id/status\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const status = str(b, \"status\") as Status;\n if (!(db.STATUSES as readonly string[]).includes(status)) return c.text(\"bad request\", 400);\n await db.setBookingStatus(Number(c.req.param(\"id\")), status);\n const back = str(b, \"back\");\n return c.redirect(/^\\/admin(\\?[\\w=&]*)?$/.test(back) ? back : \"/admin\");\n});\n\nfunction serviceInput(b: Body): db.ServiceInput | null {\n const name = str(b, \"name\", 80);\n if (!name) return null;\n const price = toLatinDigits(str(b, \"price\")).replace(/[^\\d]/g, \"\");\n return {\n name,\n description: str(b, \"description\", 600),\n category: str(b, \"category\", 40),\n duration_min: int(str(b, \"duration_min\"), 15, 600, 60),\n price: price ? Math.min(Number(price), 1_000_000) : null,\n price_note: str(b, \"price_note\", 60),\n active: b.active === \"on\" ? 1 : 0,\n sort: int(str(b, \"sort\"), -1000, 1000, 0),\n };\n}\n\napp.get(\"/admin/services\", async (c) =>\n render(c, ));\n\napp.post(\"/admin/services\", async (c) => {\n const input = serviceInput((await c.req.parseBody()) as Body);\n if (input) await db.createService(input);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\napp.post(\"/admin/services/:id\", async (c) => {\n const input = serviceInput((await c.req.parseBody()) as Body);\n const id = Number(c.req.param(\"id\"));\n if (input && Number.isInteger(id)) await db.updateService(id, input);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\napp.post(\"/admin/services/:id/delete\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n if (Number.isInteger(id)) await db.deleteService(id);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\nconst IMAGE_TYPES = [\"image/jpeg\", \"image/png\", \"image/webp\"];\n\napp.get(\"/admin/gallery\", async (c) =>\n render(\n c,\n ,\n ));\n\napp.post(\"/admin/gallery\", async (c) => {\n const body = await c.req.parseBody({ all: true });\n const files = ([] as unknown[]).concat(body.photos ?? []).filter((f): f is File => f instanceof File);\n let added = 0;\n let rejected = 0;\n for (const f of files) {\n if (!IMAGE_TYPES.includes(f.type) || f.size === 0 || f.size > 5_000_000) {\n rejected++;\n continue;\n }\n const key = `gallery/${crypto.randomUUID()}`;\n await blob.set(key, new Uint8Array(await f.arrayBuffer()));\n await db.addGalleryItem(key, f.type);\n added++;\n }\n return c.redirect(`/admin/gallery?added=${added}&rejected=${rejected}`);\n});\n\napp.post(\"/admin/gallery/:id/:action{hero|toggle|delete}\", async (c) => {\n const item = await db.getGalleryItem(Number(c.req.param(\"id\")));\n if (item) {\n const action = c.req.param(\"action\");\n if (action === \"hero\") await db.makeGalleryHero(item.id);\n else if (action === \"toggle\") await db.toggleGalleryItem(item.id);\n else {\n await db.deleteGalleryItem(item.id);\n await blob.delete(item.blob_key).catch(() => {});\n }\n }\n return c.redirect(\"/admin/gallery\");\n});\n\napp.get(\"/admin/settings\", async (c) => {\n const today = nowRiyadh().date;\n const [s, blocked] = await Promise.all([db.getSettings(), db.listBlocked(today)]);\n return render(\n c,\n ,\n );\n});\n\napp.post(\"/admin/settings\", async (c) => {\n const b = (await c.req.parseBody({ all: true })) as Body;\n const cur = await db.getSettings();\n const workDays = [...new Set(([] as unknown[]).concat(b.workDays ?? []).map(Number))]\n .filter((d) => Number.isInteger(d) && d >= 0 && d <= 6)\n .sort();\n if (!workDays.length) return c.redirect(\"/admin/settings?err=days\");\n const open = isTime(str(b, \"open\")) ? str(b, \"open\") : cur.open;\n const close = isTime(str(b, \"close\")) ? str(b, \"close\") : cur.close;\n if (toMin(open) >= toMin(close)) return c.redirect(\"/admin/settings?err=hours\");\n const handle = (key: string, fallback: string) => {\n const v = str(b, key, 60).replace(/^@/, \"\");\n return /^[A-Za-z0-9._-]{1,40}$/.test(v) ? v : fallback;\n };\n const next: Settings = {\n ...cur,\n workDays,\n open,\n close,\n slotStep: int(str(b, \"slotStep\"), 5, 120, cur.slotStep),\n bufferMin: int(str(b, \"bufferMin\"), 0, 240, cur.bufferMin),\n minNoticeHours: int(str(b, \"minNoticeHours\"), 0, 720, cur.minNoticeHours),\n maxDaysAhead: int(str(b, \"maxDaysAhead\"), 1, 730, cur.maxDaysAhead),\n allowStudio: b.allowStudio === \"on\",\n whatsapp: normalizePhone(str(b, \"whatsapp\")) ?? cur.whatsapp,\n instagram: handle(\"instagram\", cur.instagram),\n snapchat: handle(\"snapchat\", cur.snapchat),\n followers: str(b, \"followers\", 30),\n tagline: str(b, \"tagline\", 300),\n about: str(b, \"about\", 3000),\n policy: str(b, \"policy\", 3000),\n announcement: str(b, \"announcement\", 300),\n indexable: b.indexable === \"on\",\n };\n await db.saveSettings(next);\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.post(\"/admin/blocked\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const date = str(b, \"date\");\n if (isDate(date)) await db.addBlocked(date, str(b, \"reason\", 80));\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.post(\"/admin/blocked/delete\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const date = str(b, \"date\");\n if (isDate(date)) await db.removeBlocked(date);\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.notFound((c) => render(c, , 404));\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","createdAt",["D",1789336142658],"branchVersion","branchId","2fb3b93c-3153-49cc-928f-ccd798836746","id","d8f07974-33ec-460f-a8b5-8a56ac73d9bd","najla-makeup",["D",1789334949320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","موقع نجلاء الغفيلي ميك اب ارتست — خدمات ونظام حجوزات","imageUrl","cca8102f-07bb-4295-b44a-38d66d1d3405","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f1d6e-b169-7628-a2c5-3fdc2bb2972f","tursoName","d8f0797433ec460fa8b58a56ac73d9bd","tursoHostname","d8f0797433ec460fa8b58a56ac73d9bd-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"isOwned",52,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","asnfq50","handle","displayName","mfcbr4krn8-hash","avatar","https://avatars.githubusercontent.com/u/294484094?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":292,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":293,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":294,"_83":295,"_85":296,"_87":25},"tree",[175,180,185,189,190],"files",[175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"counts",{"_165":62,"_166":139,"_167":62,"_168":169,"_170":171},"contents",[130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":159,"_32":160,"_30":161,"_136":-5,"_41":42,"_40":162,"_137":58,"_38":163,"_13":62,"_33":153,"_35":-5,"_24":25,"_140":-5,"_27":164},{"_43":155,"_32":50,"_30":156,"_136":-5,"_41":42,"_40":139,"_137":58,"_38":157,"_13":62,"_33":153,"_35":-5,"_24":25,"_140":-5,"_27":158},{"_43":148,"_32":149,"_30":150,"_136":-5,"_41":42,"_40":151,"_137":58,"_38":152,"_13":62,"_33":153,"_35":-5,"_24":25,"_140":-5,"_27":154},{"_43":142,"_32":143,"_30":144,"_136":-5,"_41":42,"_40":139,"_137":25,"_38":145,"_13":62,"_33":20,"_35":146,"_24":25,"_140":-5,"_27":147},{"_43":135,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_137":25,"_38":138,"_13":139,"_33":34,"_35":37,"_24":25,"_140":45,"_27":141},"c013bed7-cc58-42f0-a813-ec40382a4629","parentId","latest",["D",1789336142658],1,"label",[28],"3045bc29-8ad5-46f0-9f97-5a77966bb223","README.md","01a09cac-8e2f-7716-b801-b39afe182f45",["D",1789334949320],"# hono-jsx-starter\n\nA minimal [Hono](https://hono.dev) + Hono JSX starter for Val Town.\nServer-rendered HTML, no build step, no React.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| **[`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter)** *(you're here)* | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## What's here\n\n```\nindex.tsx Hono app, Layout, routes\npublic/\n favicon.svg Static asset\n counter.ts Tiny client-side script\n```\n\nThe whole app fits in one file. As you grow it, the natural next moves are:\n\n- Pull `Layout` into its own `.tsx` file once you have 3+ pages.\n- Split routes with `app.route(\"/api\", api)` if `/api/*` grows.\n- Add more files under `public/` — they're served by a single\n `app.get(\"/public/*\", ...)` route.\n\n## Patterns worth knowing\n\n**JSX pragma.** Every `.tsx` file that uses JSX needs this at the top:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\n```\n\n**Server state.** The counter on `/` is `let count = 0` at module scope. It\nlives in memory on the Val Town server and survives across requests — but resets\nwhenever the val restarts (deploys, idle timeouts, etc.). For persistent state,\nswap it for [`std/sqlite`](https://www.val.town/x/std/sqlite) or\n[`std/blob`](https://www.val.town/x/std/blob).\n\n**API routes.** The `Increment` button POSTs to `/api/increment`, which returns\nJSON. Mix server-rendered pages and JSON endpoints in the same Hono app:\n\n```ts\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n```\n\n**Static files.** `serveFile` reads the file by path and serves it with the\nright content-type. `.ts` files are transpiled to JS on request by Val Town — so\nyou can write `public/counter.ts` and reference it as\n`\n \n );\n}\n\nexport function BookingPage({ s, b }: { s: Settings; b: Booking }) {\n const msg =\n `مرحبا نجلاء 🌸\\nأرسلت طلب حجز عبر الموقع:\\nرقم الحجز: ${b.code}\\nالخدمة: ${b.service_name}\\nالموعد: ${\n fmtDate(b.date)\n } - ${fmtTime(b.time)}\\nالاسم: ${b.name}`;\n const heading = {\n pending: \"استلمنا طلب حجزك 🤍\",\n confirmed: \"تم تأكيد موعدك 🤍\",\n done: \"شكراً لزيارتك 🤍\",\n cancelled: \"تم إلغاء هذا الحجز\",\n }[b.status];\n return (\n \n

\n {STATUS_LABELS[b.status]}\n

{heading}

\n رقم الحجز: {b.code}\n

الخدمة: \n {b.service_name}\n {b.people > 1 ? ` · ${peopleLabel(b.people)}` : \"\"}\n
الموعد: \n {fmtDate(b.date)} · {fmtTime(b.time)}\n
المكان: \n {LOCATIONS[b.location_type] ?? \"\"}\n {b.city ? ` · ${b.city}` : \"\"}\n
الاسم: {b.name}

\n {b.status === \"pending\"\n ?

الموعد محجوز لك مبدئياً. أرسلي التفاصيل على واتساب لتسريع التأكيد:

\n : null}\n \n إرسال تفاصيل الحجز عبر واتساب\n \n

احتفظي برابط هذه الصفحة لمتابعة حالة حجزك.

Hello from Hono JSX

About

{heading}

لوحة الإدارة

\n {b.name} {STATUS_LABELS[b.status]}\n

الحجوزات

\n {fmtDate(date)}\n {date === today ? \" — اليوم\" : \"\"}\n

الخدمات والأسعار

معرض الأعمال

الإعدادات

مواعيد العمل

محتوى الموقع

التواصل والظهور

أيام مغلقة

Diff · v11