v1.0.0 — Hexagonal architecture rewrite

Restructure the monolithic 252-line main.rs into a 10-crate workspace
with clean hexagonal architecture, swappable adapters, and a production-
ready deployment pipeline.

Backend architecture:
- domain: Canvas, Color/Position/PixelUpdate value objects, port traits
  (CanvasStore, CanvasPersistence, EventBroadcaster), BroadcastEvent
- application: use cases (place_pixel, get_state, save/restore snapshot,
  connect/disconnect), AppState with Arc snapshot cache
- config: AppConfig structs + ConfigSource trait
- api-types: shared DTOs, event name constants
- adapters: config-env, canvas-file, http-axum (rust-embed), socketio,
  websocket — all behind port traits, swappable via feature flags
- server: composition root with graceful shutdown (SIGTERM/SIGINT)

Frontend:
- Transport abstraction: Socket.IO and native WebSocket via VITE_TRANSPORT
- Canvas zoom/pan with mouse wheel, pinch-to-zoom, and +/- buttons
- ImageData rendering (~50x faster than fillRect loop)
- Touch support, responsive CSS scaling, mobile-friendly layout
- OG/Twitter Card meta tags for rich link previews

Production:
- Docker: musl static build on scratch — 2.73MB image
- CI workflows for Gitea and GitHub Actions (fmt, clippy, test, Docker push)
- deploy.sh for private registry
- 39 unit tests across domain and application
- Zero unwraps, zero unsafe, graceful error handling with tracing
- Periodic canvas snapshots with rotation, restored on startup
- All config via environment variables with typed defaults

painter-js/src/infrastructure/socket-client.js

@@ -0,0 +1,72 @@
+import io from "socket.io-client";
+
+const isDebug = import.meta.env.VITE_IS_DEBUG === "true";
+const transport = import.meta.env.VITE_TRANSPORT || "socketio";
+
+const createSocketIoTransport = () => {
+  const url = isDebug ? "ws://localhost:3000" : undefined;
+  const socket = url ? io(url) : io({ transports: ["websocket"] });
+
+  return {
+    on: (event, handler) => socket.on(event, handler),
+    emit: (event, data) => socket.emit(event, data),
+  };
+};
+
+const createWebSocketTransport = () => {
+  const handlers = {};
+  const wsUrl = isDebug
+    ? "ws://localhost:3000/ws"
+    : `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws`;
+
+  const ws = new WebSocket(wsUrl);
+  ws.binaryType = "arraybuffer";
+
+  const on = (event, handler) => {
+    if (!handlers[event]) handlers[event] = [];
+    handlers[event].push(handler);
+  };
+
+  const emit = (event, data) => {
+    if (ws.readyState !== WebSocket.OPEN) return;
+    ws.send(JSON.stringify({ type: event, ...data }));
+  };
+
+  const dispatch = (event, ...args) => {
+    (handlers[event] || []).forEach((handler) => handler(...args));
+  };
+
+  ws.addEventListener("open", () => dispatch("connect"));
+
+  ws.addEventListener("message", (event) => {
+    if (event.data instanceof ArrayBuffer) {
+      const pixels = new Uint32Array(event.data);
+      dispatch("canvas_state", Array.from(pixels));
+      return;
+    }
+
+    const message = JSON.parse(event.data);
+    switch (message.type) {
+      case "pixel-updated":
+        dispatch("pixel-updated", message);
+        break;
+      case "current_soldiers":
+        dispatch("current_soldiers", message.count);
+        break;
+      case "error":
+        dispatch("error", message.message);
+        break;
+    }
+  });
+
+  ws.addEventListener("close", () => dispatch("disconnect"));
+
+  return { on, emit };
+};
+
+export const createSocketConnection = () => {
+  if (transport === "websocket") {
+    return createWebSocketTransport();
+  }
+  return createSocketIoTransport();
+};