add proposal

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

MVP_PLAN.md

@@ -0,0 +1,310 @@
+# Minimal MVP Plan: P2P Poll App
+
+## Recommendation
+
+Build the MVP with:
+
+- Vanilla JS or TypeScript
+- Vite for local dev/build
+- Yjs for shared state
+- `y-webrtc` for browser-to-browser sync
+- `y-indexeddb` for local persistence/offline recovery
+
+This is the best fit for a small poll app because the data model is tiny, concurrent edits are possible, and Yjs already solves merge/conflict handling while `y-webrtc` gives a direct P2P transport with only signaling infrastructure.
+
+## Why This Stack
+
+### Recommended: Yjs + y-webrtc
+
+- Best balance of simplicity and correctness
+- Clients connect directly over WebRTC
+- No custom conflict-resolution logic needed
+- Easy to add offline persistence
+- Good fit for a single shared document/room
+
+### Not recommended for the first MVP
+
+#### PeerJS
+
+- Very simple transport layer
+- But you must design and maintain your own replication and merge rules
+- Fine for demos with a host-authoritative peer, weaker for true collaborative editing
+
+#### GUN
+
+- Fast to prototype realtime shared state
+- But official tutorials commonly use a GUN peer/relay server for shared data
+- For this app, its data model is less explicit than a CRDT and gives less control over vote semantics
+
+#### Automerge
+
+- Very capable CRDT and local-first model
+- But heavier than needed for a single small poll
+- Better choice if the project is expected to evolve into a richer collaborative app
+
+## MVP Scope
+
+Ship exactly one shared poll per room.
+
+Included:
+
+- Join a poll by opening a shared URL
+- Add a new option
+- Vote for one option
+- Change your vote
+- Realtime updates across peers
+- Local persistence in the browser
+- Basic connection status UI
+
+Excluded:
+
+- User accounts
+- Multiple polls per room
+- Option deletion/editing
+- Authentication/authorization
+- Rich presence
+- Advanced discovery
+- Production-grade TURN/signaling deployment
+
+## MVP UX
+
+Keep the interface intentionally small:
+
+- Poll title at the top
+- Option list with vote counts
+- One button per option to cast vote
+- Small form to add an option
+- Status line showing `connecting`, `connected`, or `offline`
+- Small label showing which option you voted for
+
+Join model:
+
+- Room ID in the URL, e.g. `/?room=poll-demo`
+- Users share the URL manually
+
+Identity model:
+
+- Generate a local `userId` once and store it in `localStorage`
+- Optional local display name, also stored locally
+
+## Shared Data Model
+
+Use a single Yjs document per room.
+
+Suggested structure:
+
+- `poll` as a `Y.Map`
+- `poll.title` as a string
+- `poll.options` as a `Y.Map<optionId, Y.Map>`
+- `poll.votes` as a `Y.Map<userId, optionId>`
+
+Each option record:
+
+- `id`
+- `label`
+- `createdBy`
+- `createdAt`
+
+Important design choice:
+
+Do not store vote counters as mutable shared numbers for the MVP.
+Instead, derive counts from `votes`.
+
+Why:
+
+- A user changing vote becomes a single write: `votes[userId] = optionId`
+- No double-counting logic
+- Concurrent writes are easier to reason about
+- Rendering counts from `votes` is trivial at this scale
+
+## Sync Model
+
+### Networking
+
+- Use `WebrtcProvider(roomId, ydoc)`
+- Start with the default public signaling servers for local development
+- If needed, swap to a self-hosted signaling server later without changing the app model
+
+### Persistence
+
+- Use `IndexeddbPersistence(roomId, ydoc)`
+- This preserves state across reloads and helps when reconnecting after temporary disconnects
+
+### Conflict behavior
+
+- Concurrent option additions merge naturally
+- Concurrent vote changes resolve at the per-user key level
+- Tally is recalculated from the merged vote map
+
+## Suggested Project Structure
+
+```text
+src/
+  main.ts
+  app.ts
+  state.ts
+  sync.ts
+  render.ts
+  identity.ts
+  styles.css
+index.html
+```
+
+Responsibilities:
+
+- `sync.ts`: create Yjs doc, WebRTC provider, IndexedDB provider
+- `state.ts`: shared structures, add option, cast vote, selectors
+- `identity.ts`: local `userId` and optional name
+- `render.ts`: DOM updates
+- `app.ts`: wire events to state and rendering
+
+## Implementation Plan
+
+### Phase 1: App shell
+
+- Create Vite app with vanilla TS or JS
+- Add a minimal single-page UI
+- Parse `room` from the URL
+- Generate and persist `userId`
+
+Success check:
+
+- App loads
+- Room ID appears in UI
+- User can type in the form
+
+### Phase 2: Shared state
+
+- Add Yjs document
+- Create root shared maps
+- Seed default poll title if missing
+- Observe document updates and re-render UI
+
+Success check:
+
+- State exists in one browser tab
+- Refresh keeps local state when IndexedDB is enabled
+
+### Phase 3: P2P sync
+
+- Add `y-webrtc`
+- Join room based on URL room ID
+- Show connection status from provider events
+
+Success check:
+
+- Two browsers on different tabs/devices see the same options
+- New options appear in near real time
+
+### Phase 4: Voting logic
+
+- Implement `castVote(optionId)` as `votes.set(userId, optionId)`
+- Derive tallies from `votes`
+- Highlight the local user’s current vote
+
+Success check:
+
+- Votes update live across peers
+- Changing vote updates counts correctly
+
+### Phase 5: Basic hardening
+
+- Trim/validate option labels
+- Prevent empty options
+- Ignore duplicate labels case-insensitively for MVP
+- Show simple offline/connecting text
+
+Success check:
+
+- Basic misuse does not break the UI
+- Reconnect restores updates
+
+## Minimal API Surface
+
+These functions are enough for the first build:
+
+- `getRoomId(): string`
+- `getUserId(): string`
+- `initSync(roomId): AppSync`
+- `ensurePollInitialized()`
+- `addOption(label: string)`
+- `castVote(optionId: string)`
+- `getViewModel(): PollViewModel`
+- `render(viewModel)`
+
+## Risks And MVP Mitigations
+
+### NAT / WebRTC connectivity
+
+Risk:
+
+- Some peer pairs may fail to connect in restrictive networks
+
+Mitigation:
+
+- Accept this for MVP
+- Keep signaling configurable
+- Add TURN only if testing shows frequent failures
+
+### Small public signaling dependency
+
+Risk:
+
+- Public signaling is fine for demos, not ideal for production
+
+Mitigation:
+
+- Treat it as replaceable infrastructure
+- Self-host later if the prototype is kept
+
+### Duplicate or messy options
+
+Risk:
+
+- Users may add near-duplicate entries
+
+Mitigation:
+
+- Normalize labels
+- Prevent exact duplicates for MVP
+
+### No trust/auth model
+
+Risk:
+
+- Any participant in the room can add options and vote
+
+Mitigation:
+
+- Accept for MVP
+- Frame rooms as small trusted groups
+
+## Estimated MVP Size
+
+For one developer:
+
+- Initial prototype: 0.5 to 1 day
+- Polished MVP with basic resilience: 1 to 2 days
+
+Rough code size:
+
+- 250 to 500 lines plus styles
+
+## Nice Next Steps After MVP
+
+- Copy-link button
+- Participant list / presence
+- Vote limit modes: single-choice or multi-choice
+- Option editing/deletion
+- QR code for room join
+- Self-hosted signaling server
+- PWA packaging for better offline behavior
+
+## Sources
+
+- PeerJS getting started: https://peerjs.com/client/getting-started
+- Yjs collaborative editor guide: https://docs.yjs.dev/getting-started/a-collaborative-editor
+- Yjs offline support: https://docs.yjs.dev/getting-started/allowing-offline-editing
+- y-webrtc README: https://github.com/yjs/y-webrtc
+- GUN tutorial showing shared data via a GUN peer: https://gun.eco/converse
+- Automerge network sync: https://automerge.org/docs/tutorial/network-sync/

README.md

@@ -1,39 +1,39 @@
 # P2P Poll App
 
-There are various issues of Trust:
-The possiblity to generate lots of users that do a lot of things (at a rather low cost)
-The possibility to put out wrong data, maby not even contradicting but additional to existing data.
-The possibility to do all kinds of shenenigans like spam other users with some requests
+Small peer-to-peer polling app built with `Vite`, `TypeScript`, `Yjs`, `y-webrtc`, and `y-indexeddb`.
 
-Due to low programming knowledge, the starting point of this proposal was to mirror how normal groups of people solve issues of trust to then automate and possibly improve the process. There are already some systems out there like Trust flow or random walk. As far as i understand it, the Flexible Trust Web also already does something like this, also maby RWOT and GNUweb but i didn't read into them too much since i discovered them rather late and want to look for feedback anyway. After all, a system with a clearer consensus might be preferable to some.
+## Features
 
-If random new people should be able to use the system as equals to previous users, but the system never has real identities as an input, then there is no way to fully prevent the creation of new users to manipulate or sabotage the poll. But it can be assumed, that your friends are rather trustworthy and most likely also their friends and so on. And if someone makes huge ammounts or just one second account, they will probably only have the creator or maby some other people as friends, and even they might already be less socially connected than a normal user.
-So the social distance to another user should be evaluated to see, whether you should count their vote.
-This is evaluated for and by every user individually, based on the information they were sent. The ammount of contacts you won't count are displayed to you, such that you get a hint at how many people you are missing but also how many people are not counting you. This encourages people to try to prove others/vise versa and make social connections to officially tie the network closer together such that the voting system works and confirms itself. It would be great, if there was some chat attached to the poll. If people want to prove their (or others) trusworhiness within this system, they are then also encouraged to have productive discussions, probably about the matter of the poll.
-Everyone in a poll with you is a "contact" of yours.
-"users" can have "friends".
-You can also manually mark users as suspicious or trustworthy or normal again.
-The system for evaluating the trustworthyness of users is somehow a mix between the concepts "weighted path score" and "trust flow" with 5 steps.
-That means for 5 steps starting with you, all friends and trusted people of people looked at in this step get some trust from the people we look at: 0.8 * The trust of the looked at person (if trusted) + 0.8 * The trust of the looked at person / friends the looked at person has (if friend). Then the trust of the person that received trust may maximally be 100. The Trust you have to yourself is 100.
-You can also mark someone as trustworthy or untrustworthy. That is then also sent around to everyone if you want(should be the standard, but maby a user wants to just see how the trustworthyness will look like after the change).
-If you receive such an information, you can make the following calculations immidiately and after every assesment of everyones trustworthyness:
-If the accused is less trustworthy then the accusing person, decrease the accused trustworthyness to 0 and the accused friends and trustees trustworthyness by the trustworthyness of the accusing person.
-If the trustworhyness of the accusing person is less than the trustworthyness of the accused, then reduce the trustworthyness of the accusing person to 0 and the accusing persons friends and trustees by the trustworthyness of the accused * 0,2.
-If you mark someone as trustworthy:
-The Trust flowing to the trusted person from you will also be 0.8 of your trust.
-Maby this should also be the effect of beeing "friends" since "trust" might be something you could more intuitively casually deal out after a short chat. If that change were to occur, then the effect would have to be switched around.
-All contacts can maximally have the Trust 100.
+- single shared poll per room
+- add options collaboratively
+- one vote per user, changeable at any time
+- peer-to-peer sync over WebRTC
+- local browser persistence for refresh/reconnect recovery
+- shareable room URL
 
+## Run locally
 
-Future matters:
-If there can be any discrepancy of sent information, depending on what sender you trust most, you will mark one of the senders as untrustworthy and neglect all future information from this user. Since everything can be signed and such, that shouldnˋt be an issue tho, but if it was, the ammount of "useless" messages to already informed people might have to increase to validate received data.
-A system to showcase the social connections in a 2D - format would be neat.
-(most likely something like this exists already)
-Obviously the user would also have to see other context like the total of all votes (trusted or not)
+```bash
+npm install
+npm run dev
+```
 
-Anonymous polls:
-A system of individually assigned trust poses a challenge for a system where you can decide not to trust some voters.
-If there is no other option some compromises might be makable, such as:
--Your Friends can know what you voted for
--The Person initiating a poll just decides on the validity of participants according to an own judgement of trust at the moment of poll-creation
--A System with clear Consensus of who to trust
+Open the local URL in two tabs or browsers and use the same `?room=` query string to join the same poll.
+
+Example:
+
+```text
+http://localhost:5173/?room=poll-demo
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+## Notes
+
+- The app uses public signaling through `y-webrtc` for MVP simplicity.
+- Poll state is not stored on an application server.
+- WebRTC connectivity can still depend on the network environment of the participating peers.

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>P2P Poll</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "p2p-poll-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "y-indexeddb": "^9.0.12",
+    "y-webrtc": "^10.3.0",
+    "yjs": "^13.6.27"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
+  }
+}

src/app.ts

@@ -0,0 +1,107 @@
+import { getUserId } from "./identity";
+import { renderApp } from "./render";
+import { addOption, castVote, createViewModel } from "./state";
+import { initSync } from "./sync";
+
+const ROOM_PARAM = "room";
+
+function createRoomId() {
+  const seed = typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID().slice(0, 8)
+    : Math.random().toString(36).slice(2, 10);
+
+  return `poll-${seed}`;
+}
+
+function ensureRoomId() {
+  const url = new URL(window.location.href);
+  let roomId = url.searchParams.get(ROOM_PARAM)?.trim();
+
+  if (!roomId) {
+    roomId = createRoomId();
+    url.searchParams.set(ROOM_PARAM, roomId);
+    window.history.replaceState({}, "", url);
+  }
+
+  return roomId;
+}
+
+export function initApp(container: HTMLElement) {
+  const roomId = ensureRoomId();
+  const userId = getUserId();
+  const sync = initSync(roomId);
+  let feedbackMessage = "Ready to collaborate.";
+  let feedbackTimer: number | undefined;
+
+  const setFeedbackMessage = (message: string) => {
+    feedbackMessage = message;
+    render();
+
+    if (feedbackTimer) {
+      window.clearTimeout(feedbackTimer);
+    }
+
+    feedbackTimer = window.setTimeout(() => {
+      feedbackMessage = "Ready to collaborate.";
+      render();
+    }, 2400);
+  };
+
+  const render = () => {
+    const viewModel = createViewModel({
+      meta: sync.meta,
+      options: sync.options,
+      votes: sync.votes,
+      roomId,
+      shareUrl: window.location.href,
+      connectionStatus: sync.getConnectionStatus(),
+      userId,
+    });
+
+    renderApp(container, viewModel, feedbackMessage, {
+      onSubmitOption: (label) => {
+        const result = addOption(sync.options, label, userId);
+        if (!result.ok) {
+          setFeedbackMessage(result.error);
+          return;
+        }
+
+        setFeedbackMessage("Option added and syncing.");
+      },
+      onVote: (optionId) => {
+        castVote(sync.votes, userId, optionId);
+        setFeedbackMessage("Vote updated.");
+      },
+      onCopyLink: async () => {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+          setFeedbackMessage("Room link copied.");
+        } catch {
+          setFeedbackMessage("Could not copy the link in this browser.");
+        }
+      },
+    });
+  };
+
+  const rerender = () => render();
+  const observe = () => rerender();
+
+  sync.doc.on("update", observe);
+  sync.persistence.once("synced", rerender);
+  sync.provider.on("status", rerender);
+  window.addEventListener("online", rerender);
+  window.addEventListener("offline", rerender);
+
+  render();
+
+  return () => {
+    if (feedbackTimer) {
+      window.clearTimeout(feedbackTimer);
+    }
+    sync.doc.off("update", observe);
+    sync.provider.off("status", rerender);
+    window.removeEventListener("online", rerender);
+    window.removeEventListener("offline", rerender);
+    sync.destroy();
+  };
+}

src/identity.ts

@@ -0,0 +1,20 @@
+const USER_ID_KEY = "p2p-poll:user-id";
+
+function createUserId() {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+
+  return `user-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function getUserId() {
+  const existing = localStorage.getItem(USER_ID_KEY);
+  if (existing) {
+    return existing;
+  }
+
+  const next = createUserId();
+  localStorage.setItem(USER_ID_KEY, next);
+  return next;
+}

src/main.ts

@@ -0,0 +1,11 @@
+import "./styles.css";
+
+import { initApp } from "./app";
+
+const container = document.querySelector<HTMLElement>("#app");
+
+if (!container) {
+  throw new Error("App container not found.");
+}
+
+initApp(container);

src/render.ts

@@ -0,0 +1,131 @@
+import type { PollViewModel } from "./state";
+
+interface RenderActions {
+  onSubmitOption: (label: string) => void;
+  onVote: (optionId: string) => void;
+  onCopyLink: () => void;
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+export function renderApp(
+  container: HTMLElement,
+  viewModel: PollViewModel,
+  feedbackMessage: string,
+  actions: RenderActions,
+) {
+  const optionMarkup = viewModel.options.length
+    ? viewModel.options
+        .map((option) => {
+          const buttonLabel = option.isSelectedByMe ? "Selected" : "Vote";
+          const selectedClass = option.isSelectedByMe ? "option-card selected" : "option-card";
+
+          return `
+            <li class="${selectedClass}">
+              <div class="option-main">
+                <div>
+                  <p class="option-label">${escapeHtml(option.label)}</p>
+                  <p class="option-meta">${option.voteCount} vote${option.voteCount === 1 ? "" : "s"}</p>
+                </div>
+                <button class="vote-button" data-option-id="${option.id}">
+                  ${buttonLabel}
+                </button>
+              </div>
+            </li>
+          `;
+        })
+        .join("")
+    : `
+      <li class="empty-state">
+        No options yet. Add the first one and it will sync to everyone in this room.
+      </li>
+    `;
+
+  const statusClass = `status-pill ${viewModel.connectionStatus}`;
+  const myVoteLabel = viewModel.myVoteOptionId
+    ? "Your vote is currently synced."
+    : "You have not voted yet.";
+
+  container.innerHTML = `
+    <main class="shell">
+      <section class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow">Peer-to-peer room</p>
+          <h1>${escapeHtml(viewModel.title)}</h1>
+          <p class="hero-text">
+            Share the room link, add options, and vote live without a central app server storing poll state.
+          </p>
+        </div>
+        <div class="hero-meta">
+          <span class="${statusClass}">${viewModel.connectionStatus}</span>
+          <p class="room-label">Room: <code>${escapeHtml(viewModel.roomId)}</code></p>
+        </div>
+      </section>
+
+      <section class="panel share-panel">
+        <label class="field-label" for="share-url">Share this room</label>
+        <div class="share-row">
+          <input id="share-url" class="share-input" type="text" readonly value="${escapeHtml(viewModel.shareUrl)}" />
+          <button id="copy-link-button" class="secondary-button" type="button">Copy link</button>
+        </div>
+      </section>
+
+      <section class="panel">
+        <div class="section-header">
+          <div>
+            <h2>Options</h2>
+            <p>${myVoteLabel}</p>
+          </div>
+        </div>
+        <ul class="options-list">${optionMarkup}</ul>
+      </section>
+
+      <section class="panel">
+        <h2>Add an option</h2>
+        <form id="add-option-form" class="option-form">
+          <input
+            id="option-input"
+            name="option"
+            type="text"
+            maxlength="80"
+            placeholder="Add an option"
+            autocomplete="off"
+            required
+          />
+          <button class="primary-button" type="submit">Add option</button>
+        </form>
+        <p class="feedback" aria-live="polite">${escapeHtml(feedbackMessage)}</p>
+      </section>
+    </main>
+  `;
+
+  const addOptionForm = container.querySelector<HTMLFormElement>("#add-option-form");
+  const optionInput = container.querySelector<HTMLInputElement>("#option-input");
+  const copyLinkButton = container.querySelector<HTMLButtonElement>("#copy-link-button");
+
+  addOptionForm?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const label = optionInput?.value ?? "";
+    actions.onSubmitOption(label);
+  });
+
+  copyLinkButton?.addEventListener("click", () => {
+    actions.onCopyLink();
+  });
+
+  container.querySelectorAll<HTMLButtonElement>("[data-option-id]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const optionId = button.dataset.optionId;
+      if (optionId) {
+        actions.onVote(optionId);
+      }
+    });
+  });
+}

src/state.ts

@@ -0,0 +1,124 @@
+import * as Y from "yjs";
+
+export const DEFAULT_POLL_TITLE = "Shared Poll";
+
+export type ConnectionStatus = "connecting" | "connected" | "offline";
+
+export interface OptionRecord {
+  id: string;
+  label: string;
+  createdAt: number;
+  createdBy: string;
+}
+
+export interface PollOptionViewModel extends OptionRecord {
+  voteCount: number;
+  isSelectedByMe: boolean;
+}
+
+export interface PollViewModel {
+  title: string;
+  roomId: string;
+  shareUrl: string;
+  connectionStatus: ConnectionStatus;
+  options: PollOptionViewModel[];
+  myVoteOptionId: string | null;
+}
+
+const META_KEY_TITLE = "title";
+
+function createOptionId() {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+
+  return `option-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function normalizeLabel(label: string) {
+  return label.trim().replace(/\s+/g, " ");
+}
+
+function getPollTitle(meta: Y.Map<string>) {
+  return meta.get(META_KEY_TITLE) ?? DEFAULT_POLL_TITLE;
+}
+
+export function ensurePollInitialized(meta: Y.Map<string>) {
+  if (!meta.has(META_KEY_TITLE)) {
+    meta.set(META_KEY_TITLE, DEFAULT_POLL_TITLE);
+  }
+}
+
+export function addOption(
+  options: Y.Map<OptionRecord>,
+  rawLabel: string,
+  userId: string,
+) {
+  const label = normalizeLabel(rawLabel);
+  if (!label) {
+    return { ok: false as const, error: "Option label cannot be empty." };
+  }
+
+  const normalizedTarget = label.toLocaleLowerCase();
+  const duplicate = Array.from(options.values()).some(
+    (option) => option.label.trim().toLocaleLowerCase() === normalizedTarget,
+  );
+
+  if (duplicate) {
+    return { ok: false as const, error: "That option already exists." };
+  }
+
+  const option: OptionRecord = {
+    id: createOptionId(),
+    label,
+    createdAt: Date.now(),
+    createdBy: userId,
+  };
+
+  options.set(option.id, option);
+  return { ok: true as const, optionId: option.id };
+}
+
+export function castVote(votes: Y.Map<string>, userId: string, optionId: string) {
+  votes.set(userId, optionId);
+}
+
+export function createViewModel(params: {
+  meta: Y.Map<string>;
+  options: Y.Map<OptionRecord>;
+  votes: Y.Map<string>;
+  roomId: string;
+  shareUrl: string;
+  connectionStatus: ConnectionStatus;
+  userId: string;
+}): PollViewModel {
+  const { meta, options, votes, roomId, shareUrl, connectionStatus, userId } =
+    params;
+
+  const tally = new Map<string, number>();
+  for (const optionId of votes.values()) {
+    tally.set(optionId, (tally.get(optionId) ?? 0) + 1);
+  }
+
+  const myVoteOptionId = votes.get(userId) ?? null;
+  const sortedOptions = Array.from(options.values()).sort((left, right) => {
+    if (left.createdAt !== right.createdAt) {
+      return left.createdAt - right.createdAt;
+    }
+
+    return left.label.localeCompare(right.label);
+  });
+
+  return {
+    title: getPollTitle(meta),
+    roomId,
+    shareUrl,
+    connectionStatus,
+    myVoteOptionId,
+    options: sortedOptions.map((option) => ({
+      ...option,
+      voteCount: tally.get(option.id) ?? 0,
+      isSelectedByMe: myVoteOptionId === option.id,
+    })),
+  };
+}

src/styles.css

@@ -0,0 +1,256 @@
+:root {
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  color: #132238;
+  background:
+    radial-gradient(circle at top left, rgba(255, 190, 120, 0.55), transparent 28%),
+    radial-gradient(circle at top right, rgba(86, 201, 166, 0.3), transparent 24%),
+    linear-gradient(180deg, #f9f4e8 0%, #f4efe6 48%, #ece5d8 100%);
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+.shell {
+  width: min(920px, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: 2rem 0 3rem;
+}
+
+.hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.hero-copy h1 {
+  margin: 0.15rem 0 0.5rem;
+  font-size: clamp(2.4rem, 6vw, 4rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+}
+
+.hero-text,
+.section-header p,
+.feedback,
+.option-meta,
+.room-label {
+  color: #4a5a6a;
+}
+
+.eyebrow {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.8rem;
+  color: #915f00;
+}
+
+.hero-meta {
+  min-width: 15rem;
+  padding: 1rem 1.1rem;
+  border-radius: 1.2rem;
+  background: rgba(255, 255, 255, 0.68);
+  border: 1px solid rgba(19, 34, 56, 0.08);
+  backdrop-filter: blur(10px);
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.75rem;
+  border-radius: 999px;
+  font-weight: 700;
+  text-transform: capitalize;
+  font-size: 0.9rem;
+}
+
+.status-pill.connected {
+  background: rgba(86, 201, 166, 0.18);
+  color: #135d43;
+}
+
+.status-pill.connecting {
+  background: rgba(255, 190, 120, 0.22);
+  color: #8c5300;
+}
+
+.status-pill.offline {
+  background: rgba(219, 82, 82, 0.16);
+  color: #8f1f1f;
+}
+
+.panel {
+  margin-bottom: 1.25rem;
+  padding: 1.25rem;
+  border-radius: 1.3rem;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(19, 34, 56, 0.08);
+  box-shadow: 0 14px 40px rgba(19, 34, 56, 0.08);
+  backdrop-filter: blur(10px);
+}
+
+.panel h2 {
+  margin: 0 0 0.45rem;
+  font-size: 1.1rem;
+}
+
+.share-row,
+.option-form,
+.option-main {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.field-label {
+  display: block;
+  margin-bottom: 0.6rem;
+  font-weight: 700;
+}
+
+.share-input,
+.option-form input {
+  width: 100%;
+  min-width: 0;
+  border-radius: 0.95rem;
+  border: 1px solid rgba(19, 34, 56, 0.14);
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0.85rem 1rem;
+  color: #132238;
+}
+
+.share-input:focus,
+.option-form input:focus {
+  outline: 2px solid rgba(255, 190, 120, 0.65);
+  outline-offset: 1px;
+}
+
+.primary-button,
+.secondary-button,
+.vote-button {
+  border: none;
+  border-radius: 0.95rem;
+  padding: 0.85rem 1rem;
+  font-weight: 700;
+  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+}
+
+.primary-button,
+.vote-button {
+  background: #132238;
+  color: #f9f4e8;
+  box-shadow: 0 10px 20px rgba(19, 34, 56, 0.14);
+}
+
+.secondary-button {
+  background: rgba(19, 34, 56, 0.08);
+  color: #132238;
+}
+
+.primary-button:hover,
+.secondary-button:hover,
+.vote-button:hover {
+  transform: translateY(-1px);
+}
+
+.options-list {
+  list-style: none;
+  margin: 1rem 0 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.option-card,
+.empty-state {
+  border-radius: 1.1rem;
+  padding: 1rem;
+  background: rgba(247, 244, 236, 0.95);
+  border: 1px solid rgba(19, 34, 56, 0.08);
+}
+
+.option-card.selected {
+  border-color: rgba(86, 201, 166, 0.85);
+  background: rgba(232, 249, 242, 0.95);
+}
+
+.option-main {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option-label {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.option-meta,
+.feedback,
+.room-label {
+  margin: 0.35rem 0 0;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.feedback {
+  min-height: 1.5rem;
+}
+
+code {
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+}
+
+@media (max-width: 720px) {
+  .shell {
+    width: min(100% - 1rem, 920px);
+    padding-top: 1rem;
+  }
+
+  .hero,
+  .share-row,
+  .option-form,
+  .option-main,
+  .section-header {
+    flex-direction: column;
+  }
+
+  .hero-meta {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .primary-button,
+  .secondary-button,
+  .vote-button {
+    width: 100%;
+  }
+}

src/sync.ts

@@ -0,0 +1,64 @@
+import { IndexeddbPersistence } from "y-indexeddb";
+import { WebrtcProvider } from "y-webrtc";
+import * as Y from "yjs";
+
+import { type ConnectionStatus, ensurePollInitialized, type OptionRecord } from "./state";
+
+export interface AppSync {
+  doc: Y.Doc;
+  meta: Y.Map<string>;
+  options: Y.Map<OptionRecord>;
+  votes: Y.Map<string>;
+  provider: WebrtcProvider;
+  persistence: IndexeddbPersistence;
+  getConnectionStatus: () => ConnectionStatus;
+  destroy: () => void;
+}
+
+export function initSync(roomId: string): AppSync {
+  const doc = new Y.Doc();
+  const meta = doc.getMap<string>("poll-meta");
+  const options = doc.getMap<OptionRecord>("poll-options");
+  const votes = doc.getMap<string>("poll-votes");
+
+  ensurePollInitialized(meta);
+
+  let connectionStatus: ConnectionStatus = navigator.onLine ? "connecting" : "offline";
+  const provider = new WebrtcProvider(roomId, doc);
+  const persistence = new IndexeddbPersistence(roomId, doc);
+
+  const syncConnectionStatus = (status: ConnectionStatus) => {
+    connectionStatus = navigator.onLine ? status : "offline";
+  };
+
+  const handleOnline = () => {
+    syncConnectionStatus(provider.connected ? "connected" : "connecting");
+  };
+  const handleOffline = () => {
+    connectionStatus = "offline";
+  };
+
+  provider.on("status", (event: { connected: boolean }) => {
+    syncConnectionStatus(event.connected ? "connected" : "connecting");
+  });
+
+  window.addEventListener("online", handleOnline);
+  window.addEventListener("offline", handleOffline);
+
+  return {
+    doc,
+    meta,
+    options,
+    votes,
+    provider,
+    persistence,
+    getConnectionStatus: () => connectionStatus,
+    destroy: () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+      persistence.destroy();
+      provider.destroy();
+      doc.destroy();
+    },
+  };
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}