Employee Badge Designer

\n onChange(e.target.value)}\n className=\"w-7 h-7 cursor-pointer bg-transparent border-0 p-0\"\n />\n {value}\n

\n \n );\n}\n\nfunction Section({ title, children }: { title: string; children: ReactNode }) {\n return (\n

{title}

{children}

\n );\n}\n\nexport function Controls({ badge, patch }: { badge: Badge; patch: (p: Partial) => void }) {\n return (\n

\n patch({ name })} />\n patch({ title })} />\n

\n patch({ department })} />\n patch({ employeeId })} />\n

\n patch({ photoUrl })}\n />\n

\n\n

\n patch({ company })} />\n patch({ logoUrl })}\n />\n patch({ footer })}\n />\n

\n\n

\n {TEMPLATES.map((t) => (\n patch({ template: t.id })}\n className={`rounded-md border px-2 py-2 text-xs font-medium cursor-pointer transition-colors ${\n badge.template === t.id\n ? \"border-blue-500 bg-blue-50 text-blue-700\"\n : \"border-gray-200 text-gray-600 hover:border-gray-300\"\n }`}\n >\n {t.label}\n \n ))}\n

\n {([\"portrait\", \"landscape\"] as const).map((o) => (\n patch({ orientation: o })}\n className={`rounded-md border px-2 py-1.5 text-xs font-medium capitalize cursor-pointer transition-colors ${\n badge.orientation === o\n ? \"border-blue-500 bg-blue-50 text-blue-700\"\n : \"border-gray-200 text-gray-600 hover:border-gray-300\"\n }`}\n >\n {o}\n \n ))}\n

\n \n patch({ showBarcode: e.target.checked })}\n className=\"cursor-pointer\"\n />\n Show barcode\n \n

\n\n

\n {PRESETS.map((p) => (\n patch({ accent: p.accent, bg: p.bg, text: p.text })}\n className=\"w-7 h-7 rounded-full border border-gray-200 cursor-pointer hover:scale-110 transition-transform\"\n style={{ background: p.accent }}\n />\n ))}\n

\n patch({ accent })} />\n patch({ bg })} />\n patch({ text })} />\n

\n );\n}\n","label",[175,176,66],"frontend","components","pulls","branches",1,"forks","envVars",{"_185":26,"_187":26},"connections",{"_185":26,"_186":26},"count","unfilledCount","emptyCount",{"_34":336,"_13":327,"_64":321,"_44":-5,"_36":37,"_167":322,"_168":103,"_38":337,"_40":26,"_67":235,"_171":-5,"_69":24,"_173":-5,"_214":338,"_17":339},{"_34":328,"_13":329,"_64":330,"_44":321,"_36":37,"_167":331,"_168":103,"_38":332,"_40":26,"_67":68,"_171":333,"_69":24,"_173":-5,"_214":334,"_17":335},{"_34":318,"_13":319,"_64":320,"_44":321,"_36":37,"_167":322,"_168":103,"_38":323,"_40":26,"_67":68,"_171":324,"_69":24,"_173":-5,"_214":325,"_17":326},{"_34":314,"_13":175,"_64":241,"_44":-5,"_36":37,"_167":179,"_168":103,"_38":315,"_40":26,"_67":235,"_171":-5,"_69":24,"_173":-5,"_214":316,"_17":317},{"_34":310,"_13":176,"_64":166,"_44":241,"_36":37,"_167":179,"_168":103,"_38":311,"_40":26,"_67":235,"_171":-5,"_69":24,"_173":-5,"_214":312,"_17":313},{"_34":302,"_13":303,"_64":304,"_44":166,"_36":37,"_167":305,"_168":103,"_38":306,"_40":179,"_67":68,"_171":307,"_69":24,"_173":-5,"_214":308,"_17":309},{"_34":294,"_13":295,"_64":296,"_44":166,"_36":37,"_167":297,"_168":103,"_38":298,"_40":170,"_67":68,"_171":299,"_69":24,"_173":-5,"_214":300,"_17":301},{"_34":165,"_13":66,"_64":65,"_44":166,"_36":37,"_167":83,"_168":103,"_38":291,"_40":170,"_67":68,"_171":172,"_69":24,"_173":-5,"_214":292,"_17":293},{"_34":283,"_13":284,"_64":285,"_44":166,"_36":37,"_167":286,"_168":103,"_38":287,"_40":26,"_67":68,"_171":288,"_69":24,"_173":-5,"_214":289,"_17":290},{"_34":275,"_13":276,"_64":277,"_44":166,"_36":37,"_167":278,"_168":103,"_38":279,"_40":26,"_67":68,"_171":280,"_69":24,"_173":-5,"_214":281,"_17":282},{"_34":271,"_13":270,"_64":264,"_44":241,"_36":37,"_167":265,"_168":103,"_38":272,"_40":26,"_67":235,"_171":-5,"_69":24,"_173":-5,"_214":273,"_17":274},{"_34":261,"_13":262,"_64":263,"_44":264,"_36":37,"_167":265,"_168":103,"_38":266,"_40":26,"_67":68,"_171":267,"_69":24,"_173":-5,"_214":268,"_17":269},{"_34":254,"_13":255,"_64":256,"_44":241,"_36":37,"_167":179,"_168":103,"_38":257,"_40":26,"_67":21,"_171":258,"_69":24,"_173":-5,"_214":259,"_17":260},{"_34":247,"_13":248,"_64":249,"_44":241,"_36":37,"_167":179,"_168":103,"_38":250,"_40":26,"_67":68,"_171":251,"_69":24,"_173":-5,"_214":252,"_17":253},{"_34":238,"_13":239,"_64":240,"_44":241,"_36":37,"_167":242,"_168":103,"_38":243,"_40":179,"_67":68,"_171":244,"_69":24,"_173":-5,"_214":245,"_17":246},{"_34":233,"_13":232,"_64":227,"_44":-5,"_36":37,"_167":170,"_168":103,"_38":234,"_40":26,"_67":235,"_171":-5,"_69":24,"_173":-5,"_214":236,"_17":237},{"_34":224,"_13":225,"_64":226,"_44":227,"_36":37,"_167":170,"_168":103,"_38":228,"_40":26,"_67":68,"_171":229,"_69":24,"_173":-5,"_214":230,"_17":231},{"_34":217,"_13":218,"_64":219,"_44":-5,"_36":37,"_167":129,"_168":103,"_38":220,"_40":179,"_67":21,"_171":221,"_69":24,"_173":-5,"_214":222,"_17":223},{"_34":207,"_13":208,"_64":101,"_44":-5,"_36":37,"_167":209,"_168":103,"_38":210,"_40":179,"_67":211,"_171":212,"_69":24,"_173":213,"_214":215,"_17":216},"04510882-c9af-4c2a-a0b2-f02d2aad22c5","index.ts",5,["D",1788306726981],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { deleteBadge, listBadges, saveBadge } from \"./backend/badges.ts\";\nimport { handleUpload, serveImage } from \"./backend/uploads.ts\";\nimport type { Badge } from \"./shared/types.ts\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// --- Image uploads (photos & company logos) ---\napp.post(\"/api/upload\", (c) => handleUpload(c.req.raw));\napp.get(\"/img/:file\", (c) => serveImage(c.req.param(\"file\")));\n\n// --- Saved badge roster ---\napp.get(\"/api/badges\", async (c) => c.json(await listBadges()));\napp.post(\"/api/badges\", async (c) => c.json(await saveBadge(await c.req.json() as Badge)));\napp.delete(\"/api/badges/:id\", async (c) => {\n await deleteBadge(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// View source redirect\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;\n","employee-badge-designer","children",[],[208],"9aa7f2e5-fd3b-4da8-8c22-019c102e5c1a","README.md","01a05f61-b1a0-7277-97f9-0502990a07f0",["D",1788306995302],"# Employee Badge Designer\n\nDesign employee ID badges in the browser — upload a headshot and your company\nlogo, pick a layout and colors, then print on standard CR80 card stock or export\na PNG.\n\n**[Open the designer](url:index.ts)**\n\n## What it does\n\n- **Image uploads** — drag-and-drop (or click) a photo and a company logo. Both\n are downscaled in the browser with a canvas before upload, then stored as\n blobs and served from `/img/:file` with immutable caching.\n- **Three layouts** — Classic (header bar + round photo), Modern (full-bleed\n color panel), Minimal (type-led). Each renders in portrait or landscape.\n- **Custom colors** — six presets plus accent / card / text color pickers.\n- **True-to-life sizing** — cards are laid out at 2.125in × 3.375in (CR80), so\n printing at 100% gives a badge that fits a standard holder.\n- **Roster** — save badges to SQLite, reload them for editing, and print the\n whole roster as one sheet.\n- **PNG export** — renders the preview at 4× with `html-to-image`.\n\n## Architecture\n\n```mermaid\ngraph TD\n Browser[\"Browser (React SPA)\"] -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono --> Root[\"frontend/root.tsx
HTML shell + print CSS\"]\n Browser -->|\"POST /api/upload\"| Uploads[\"backend/uploads.ts\"]\n Uploads --> Blob[(\"std/blob\")]\n Browser -->|\"GET /img/:file\"| Uploads\n Browser -->|\"GET/POST/DELETE /api/badges\"| Badges[\"backend/badges.ts\"]\n Badges --> SQLite[(\"std/sqlite\")]\n```\n\n## Files\n\n```\nindex.ts ← Hono server: pages, upload + roster APIs\nbackend/\n uploads.ts ← image upload to blob storage, /img/:file serving\n badges.ts ← saved-badge CRUD in SQLite\nshared/\n types.ts ← Badge shape, templates, presets, card sizing\nfrontend/\n root.tsx ← HTML shell (Twind + the @media print rules)\n index.tsx ← React entrypoint\n lib/images.ts ← canvas downscaling + upload helper\n components/\n App.tsx ← layout, save/print/export actions\n Controls.tsx ← the design form\n BadgeCard.tsx ← the badge itself (3 templates × 2 orientations)\n ImageUpload.tsx ← drag-and-drop upload widget\n Roster.tsx ← saved badge list\n```\n\n## Printing notes\n\nPrint rules live in `frontend/root.tsx` as the app's only stylesheet — `@page`\nmargins and print-only visibility can't be expressed as utility classes. When\nprinting, enable **Background graphics** in the browser's print dialog so accent\ncolors render, and print at 100% scale (no \"fit to page\") for accurate card\ndimensions.\n\n## Storage\n\nPhotos and logos are blobs; on the free plan all blobs share a 10MB budget,\nwhich is why uploads are downscaled to a 640px (photo) / 480px (logo) long edge\nfirst. Removing a badge from the roster does not delete its uploaded images.\n",[],[218],"b4507ec7-f4f5-407b-96fe-69591557d865","types.ts","18d6001c-a660-11f1-9db0-1607ee4eb77e","84acc09e-36cd-4d8a-a32d-077651075311",["D",1788306708883],"export type Orientation = \"portrait\" | \"landscape\";\nexport type TemplateId = \"classic\" | \"modern\" | \"minimal\";\n\nexport interface Badge {\n id: string;\n name: string;\n title: string;\n department: string;\n employeeId: string;\n company: string;\n footer: string;\n /** URL path to the uploaded photo, e.g. \"/img/abc.jpg\" */\n photoUrl: string | null;\n /** URL path to the uploaded company logo */\n logoUrl: string | null;\n accent: string;\n bg: string;\n text: string;\n orientation: Orientation;\n template: TemplateId;\n showBarcode: boolean;\n updatedAt?: string;\n}\n\nexport const TEMPLATES: { id: TemplateId; label: string; hint: string }[] = [\n { id: \"classic\", label: \"Classic\", hint: \"Header bar + round photo\" },\n { id: \"modern\", label: \"Modern\", hint: \"Full-bleed color panel\" },\n { id: \"minimal\", label: \"Minimal\", hint: \"Type-led, thin accent rule\" },\n];\n\nexport const PRESETS: { label: string; accent: string; bg: string; text: string }[] = [\n { label: \"Midnight\", accent: \"#1e3a8a\", bg: \"#ffffff\", text: \"#0f172a\" },\n { label: \"Forest\", accent: \"#166534\", bg: \"#ffffff\", text: \"#14532d\" },\n { label: \"Ember\", accent: \"#c2410c\", bg: \"#fffbf7\", text: \"#431407\" },\n { label: \"Grape\", accent: \"#6d28d9\", bg: \"#ffffff\", text: \"#2e1065\" },\n { label: \"Slate\", accent: \"#334155\", bg: \"#f8fafc\", text: \"#0f172a\" },\n { label: \"Rose\", accent: \"#be123c\", bg: \"#ffffff\", text: \"#4c0519\" },\n];\n\nexport function newBadge(): Badge {\n return {\n id: crypto.randomUUID(),\n name: \"Ada Lovelace\",\n title: \"Principal Engineer\",\n department: \"Analytical Engines\",\n employeeId: \"EMP-00815\",\n company: \"Babbage & Co.\",\n footer: \"If found, please return to reception\",\n photoUrl: null,\n logoUrl: null,\n accent: \"#1e3a8a\",\n bg: \"#ffffff\",\n text: \"#0f172a\",\n orientation: \"portrait\",\n template: \"classic\",\n showBarcode: true,\n };\n}\n\n/** CR80 card size in inches — the standard ID badge stock. */\nexport function cardSize(orientation: Orientation) {\n return orientation === \"portrait\"\n ? { width: \"2.125in\", height: \"3.375in\" }\n : { width: \"3.375in\", height: \"2.125in\" };\n}\n",[],[232,225],"shared","ab4ebd2d-3530-49ed-9158-dbf808ad414f",["D",1788306708883],"directory",[204],[232],"97c3eb01-606f-4e28-a111-391be2c62340","root.tsx","01a05f61-b1a0-7277-97f8-f8423793edb6","01a05f61-b1a0-7277-97f8-ff5e3824e08d",12,["D",1788306917482],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// Print rules can't be expressed as utility classes (@page, print-only layout),\n// so they live here as the one small stylesheet in the app.\nconst printCss = `\n@page { margin: 12mm; }\n.screen-hidden { display: none; }\n@media print {\n body { background: #fff !important; }\n .no-print, .print-hidden { display: none !important; }\n .screen-hidden { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 6mm; }\n .preview-box { width: auto !important; height: auto !important; }\n .preview-scale { transform: none !important; }\n .badge-card {\n box-shadow: none !important;\n outline: 1px dashed #cbd5e1;\n outline-offset: 2px;\n break-inside: avoid;\n }\n}\n`;\n\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n Employee Badge Designer\n

History · Controls.tsx