Compare commits
2 Commits
feat/p2p-p
...
proposal-8
| Author | SHA1 | Date | |
|---|---|---|---|
|
2a39d594c7 | ||
|
|
42594951f3 |
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
310
MVP_PLAN.md
Normal file
310
MVP_PLAN.md
Normal file
@@ -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/
|
||||
38
README.md
38
README.md
@@ -1 +1,39 @@
|
||||
# P2P Poll App
|
||||
|
||||
Small peer-to-peer polling app built with `Vite`, `TypeScript`, `Yjs`, `y-webrtc`, and `y-indexeddb`.
|
||||
|
||||
## Features
|
||||
|
||||
- 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
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
41
index.html
41
index.html
@@ -1,33 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<!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>
|
||||
<link rel="stylesheet" href="/src/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<h1>P2P Poll</h1>
|
||||
<div id="status">
|
||||
<span id="connection-status" class="connecting">Connecting...</span>
|
||||
<span id="peer-count">1 peer</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="add-option">
|
||||
<input type="text" id="option-input" placeholder="Add a poll option..." maxlength="100">
|
||||
<button id="add-btn">Add</button>
|
||||
</div>
|
||||
|
||||
<div id="poll-options"></div>
|
||||
|
||||
<p id="empty-state">No options yet. Add one above!</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<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>
|
||||
|
||||
294
package-lock.json
generated
294
package-lock.json
generated
@@ -1,24 +1,26 @@
|
||||
{
|
||||
"name": "p2p-poll",
|
||||
"version": "1.0.0",
|
||||
"name": "p2p-poll-app",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "p2p-poll",
|
||||
"version": "1.0.0",
|
||||
"name": "p2p-poll-app",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"y-indexeddb": "^9.0.12",
|
||||
"y-webrtc": "^10.3.0",
|
||||
"yjs": "^13.6.0"
|
||||
"yjs": "^13.6.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^6.0.0"
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
||||
"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
|
||||
"integrity": "sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -33,9 +35,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
|
||||
"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.4.tgz",
|
||||
"integrity": "sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -50,9 +52,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -67,9 +69,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -84,9 +86,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -101,9 +103,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -118,9 +120,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -135,9 +137,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -152,9 +154,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
|
||||
"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.4.tgz",
|
||||
"integrity": "sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -169,9 +171,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -186,9 +188,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
|
||||
"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.4.tgz",
|
||||
"integrity": "sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@@ -203,9 +205,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
|
||||
"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.4.tgz",
|
||||
"integrity": "sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@@ -220,9 +222,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
|
||||
"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.4.tgz",
|
||||
"integrity": "sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
@@ -237,9 +239,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
|
||||
"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.4.tgz",
|
||||
"integrity": "sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -254,9 +256,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
|
||||
"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.4.tgz",
|
||||
"integrity": "sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@@ -271,9 +273,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
|
||||
"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.4.tgz",
|
||||
"integrity": "sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@@ -288,9 +290,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -305,9 +307,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -322,9 +324,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -339,9 +341,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -356,9 +358,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -373,9 +375,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openharmony-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -390,9 +392,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -407,9 +409,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.4.tgz",
|
||||
"integrity": "sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -424,9 +426,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
|
||||
"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.4.tgz",
|
||||
"integrity": "sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@@ -441,9 +443,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.4.tgz",
|
||||
"integrity": "sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -882,9 +884,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
|
||||
"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.4.tgz",
|
||||
"integrity": "sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
@@ -895,32 +897,32 @@
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.25.12",
|
||||
"@esbuild/android-arm": "0.25.12",
|
||||
"@esbuild/android-arm64": "0.25.12",
|
||||
"@esbuild/android-x64": "0.25.12",
|
||||
"@esbuild/darwin-arm64": "0.25.12",
|
||||
"@esbuild/darwin-x64": "0.25.12",
|
||||
"@esbuild/freebsd-arm64": "0.25.12",
|
||||
"@esbuild/freebsd-x64": "0.25.12",
|
||||
"@esbuild/linux-arm": "0.25.12",
|
||||
"@esbuild/linux-arm64": "0.25.12",
|
||||
"@esbuild/linux-ia32": "0.25.12",
|
||||
"@esbuild/linux-loong64": "0.25.12",
|
||||
"@esbuild/linux-mips64el": "0.25.12",
|
||||
"@esbuild/linux-ppc64": "0.25.12",
|
||||
"@esbuild/linux-riscv64": "0.25.12",
|
||||
"@esbuild/linux-s390x": "0.25.12",
|
||||
"@esbuild/linux-x64": "0.25.12",
|
||||
"@esbuild/netbsd-arm64": "0.25.12",
|
||||
"@esbuild/netbsd-x64": "0.25.12",
|
||||
"@esbuild/openbsd-arm64": "0.25.12",
|
||||
"@esbuild/openbsd-x64": "0.25.12",
|
||||
"@esbuild/openharmony-arm64": "0.25.12",
|
||||
"@esbuild/sunos-x64": "0.25.12",
|
||||
"@esbuild/win32-arm64": "0.25.12",
|
||||
"@esbuild/win32-ia32": "0.25.12",
|
||||
"@esbuild/win32-x64": "0.25.12"
|
||||
"@esbuild/aix-ppc64": "0.27.4",
|
||||
"@esbuild/android-arm": "0.27.4",
|
||||
"@esbuild/android-arm64": "0.27.4",
|
||||
"@esbuild/android-x64": "0.27.4",
|
||||
"@esbuild/darwin-arm64": "0.27.4",
|
||||
"@esbuild/darwin-x64": "0.27.4",
|
||||
"@esbuild/freebsd-arm64": "0.27.4",
|
||||
"@esbuild/freebsd-x64": "0.27.4",
|
||||
"@esbuild/linux-arm": "0.27.4",
|
||||
"@esbuild/linux-arm64": "0.27.4",
|
||||
"@esbuild/linux-ia32": "0.27.4",
|
||||
"@esbuild/linux-loong64": "0.27.4",
|
||||
"@esbuild/linux-mips64el": "0.27.4",
|
||||
"@esbuild/linux-ppc64": "0.27.4",
|
||||
"@esbuild/linux-riscv64": "0.27.4",
|
||||
"@esbuild/linux-s390x": "0.27.4",
|
||||
"@esbuild/linux-x64": "0.27.4",
|
||||
"@esbuild/netbsd-arm64": "0.27.4",
|
||||
"@esbuild/netbsd-x64": "0.27.4",
|
||||
"@esbuild/openbsd-arm64": "0.27.4",
|
||||
"@esbuild/openbsd-x64": "0.27.4",
|
||||
"@esbuild/openharmony-arm64": "0.27.4",
|
||||
"@esbuild/sunos-x64": "0.27.4",
|
||||
"@esbuild/win32-arm64": "0.27.4",
|
||||
"@esbuild/win32-ia32": "0.27.4",
|
||||
"@esbuild/win32-x64": "0.27.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
@@ -1266,6 +1268,20 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@@ -1273,24 +1289,24 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
|
||||
"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.4",
|
||||
"picomatch": "^4.0.2",
|
||||
"postcss": "^8.5.3",
|
||||
"rollup": "^4.34.9",
|
||||
"tinyglobby": "^0.2.13"
|
||||
"esbuild": "^0.27.0",
|
||||
"fdir": "^6.5.0",
|
||||
"picomatch": "^4.0.3",
|
||||
"postcss": "^8.5.6",
|
||||
"rollup": "^4.43.0",
|
||||
"tinyglobby": "^0.2.15"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
@@ -1299,14 +1315,14 @@
|
||||
"fsevents": "~2.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
||||
"@types/node": "^20.19.0 || >=22.12.0",
|
||||
"jiti": ">=1.21.0",
|
||||
"less": "*",
|
||||
"less": "^4.0.0",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"sass-embedded": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"sass": "^1.70.0",
|
||||
"sass-embedded": "^1.70.0",
|
||||
"stylus": ">=0.54.8",
|
||||
"sugarss": "^5.0.0",
|
||||
"terser": "^5.16.0",
|
||||
"tsx": "^4.8.1",
|
||||
"yaml": "^2.4.2"
|
||||
@@ -1369,6 +1385,26 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/y-indexeddb": {
|
||||
"version": "9.0.12",
|
||||
"resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.12.tgz",
|
||||
"integrity": "sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lib0": "^0.2.74"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"yjs": "^13.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/y-protocols": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.7.tgz",
|
||||
|
||||
14
package.json
14
package.json
@@ -1,18 +1,20 @@
|
||||
{
|
||||
"name": "p2p-poll",
|
||||
"name": "p2p-poll-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"yjs": "^13.6.0",
|
||||
"y-webrtc": "^10.3.0"
|
||||
"y-indexeddb": "^9.0.12",
|
||||
"y-webrtc": "^10.3.0",
|
||||
"yjs": "^13.6.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^6.0.0"
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.5"
|
||||
}
|
||||
}
|
||||
|
||||
107
src/app.ts
Normal file
107
src/app.ts
Normal file
@@ -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();
|
||||
};
|
||||
}
|
||||
20
src/identity.ts
Normal file
20
src/identity.ts
Normal file
@@ -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;
|
||||
}
|
||||
136
src/main.js
136
src/main.js
@@ -1,136 +0,0 @@
|
||||
import * as Y from 'yjs';
|
||||
import { WebrtcProvider } from 'y-webrtc';
|
||||
|
||||
// --- Peer ID (stable across reloads) ---
|
||||
|
||||
function getOrCreatePeerId() {
|
||||
let id = localStorage.getItem('peer-id');
|
||||
if (!id) {
|
||||
id = crypto.randomUUID();
|
||||
localStorage.setItem('peer-id', id);
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
const peerId = getOrCreatePeerId();
|
||||
|
||||
// --- Room name from URL ---
|
||||
|
||||
function getRoomName() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get('room') || 'default-poll';
|
||||
}
|
||||
|
||||
const roomName = getRoomName();
|
||||
|
||||
// --- Yjs setup ---
|
||||
|
||||
const ydoc = new Y.Doc();
|
||||
const provider = new WebrtcProvider(roomName, ydoc);
|
||||
const yOptions = ydoc.getMap('poll-options');
|
||||
|
||||
// --- Data operations ---
|
||||
|
||||
function addOption(name) {
|
||||
const id = crypto.randomUUID();
|
||||
const optionMap = new Y.Map();
|
||||
optionMap.set('name', name);
|
||||
optionMap.set('votes', new Y.Map());
|
||||
yOptions.set(id, optionMap);
|
||||
}
|
||||
|
||||
function toggleVote(optionId) {
|
||||
const optionMap = yOptions.get(optionId);
|
||||
if (!optionMap) return;
|
||||
const votes = optionMap.get('votes');
|
||||
if (votes.has(peerId)) {
|
||||
votes.delete(peerId);
|
||||
} else {
|
||||
votes.set(peerId, true);
|
||||
}
|
||||
}
|
||||
|
||||
// --- UI rendering ---
|
||||
|
||||
const container = document.getElementById('poll-options');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
|
||||
function render() {
|
||||
container.innerHTML = '';
|
||||
|
||||
const entries = [];
|
||||
yOptions.forEach((optionMap, id) => {
|
||||
entries.push({
|
||||
id,
|
||||
name: optionMap.get('name'),
|
||||
votes: optionMap.get('votes').size,
|
||||
voted: optionMap.get('votes').has(peerId),
|
||||
});
|
||||
});
|
||||
|
||||
entries.sort((a, b) => b.votes - a.votes || a.name.localeCompare(b.name));
|
||||
|
||||
emptyState.className = entries.length > 0 ? 'hidden' : '';
|
||||
|
||||
for (const entry of entries) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'poll-option';
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'option-name';
|
||||
nameSpan.textContent = entry.name;
|
||||
|
||||
const voteCount = document.createElement('span');
|
||||
voteCount.className = 'vote-count';
|
||||
voteCount.textContent = entry.votes;
|
||||
|
||||
const voteBtn = document.createElement('button');
|
||||
voteBtn.className = entry.voted ? 'vote-btn voted' : 'vote-btn';
|
||||
voteBtn.textContent = entry.voted ? 'Unvote' : 'Vote';
|
||||
voteBtn.addEventListener('click', () => toggleVote(entry.id));
|
||||
|
||||
div.append(nameSpan, voteCount, voteBtn);
|
||||
container.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-render on any change in the shared state
|
||||
yOptions.observeDeep(() => render());
|
||||
|
||||
// --- Add option handlers ---
|
||||
|
||||
const input = document.getElementById('option-input');
|
||||
const addBtn = document.getElementById('add-btn');
|
||||
|
||||
addBtn.addEventListener('click', () => {
|
||||
const name = input.value.trim();
|
||||
if (name) {
|
||||
addOption(name);
|
||||
input.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') addBtn.click();
|
||||
});
|
||||
|
||||
// --- Connection status & peer count ---
|
||||
|
||||
const statusEl = document.getElementById('connection-status');
|
||||
const peerCountEl = document.getElementById('peer-count');
|
||||
|
||||
provider.on('synced', ({ synced }) => {
|
||||
statusEl.textContent = synced ? 'Connected' : 'Connecting...';
|
||||
statusEl.className = synced ? 'connected' : 'connecting';
|
||||
});
|
||||
|
||||
function updatePeerCount() {
|
||||
const count = provider.awareness.getStates().size;
|
||||
peerCountEl.textContent = `${count} peer${count !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
provider.awareness.on('change', updatePeerCount);
|
||||
updatePeerCount();
|
||||
|
||||
// --- Initial render ---
|
||||
render();
|
||||
11
src/main.ts
Normal file
11
src/main.ts
Normal file
@@ -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);
|
||||
131
src/render.ts
Normal file
131
src/render.ts
Normal file
@@ -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("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
124
src/state.ts
Normal file
124
src/state.ts
Normal file
@@ -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,
|
||||
})),
|
||||
};
|
||||
}
|
||||
144
src/style.css
144
src/style.css
@@ -1,144 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#status {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#connection-status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#connection-status.connected::before {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
#connection-status.connecting::before {
|
||||
background: #ff9800;
|
||||
}
|
||||
|
||||
#add-option {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#option-input {
|
||||
flex: 1;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#option-input:focus {
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#add-btn:hover {
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
.poll-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.option-name {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.vote-count {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-right: 0.75rem;
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vote-btn {
|
||||
padding: 0.4rem 1rem;
|
||||
border: 2px solid #2196f3;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.vote-btn:hover {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.vote-btn.voted {
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vote-btn.voted:hover {
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
#empty-state {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#empty-state.hidden {
|
||||
display: none;
|
||||
}
|
||||
256
src/styles.css
Normal file
256
src/styles.css
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
64
src/sync.ts
Normal file
64
src/sync.ts
Normal file
@@ -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();
|
||||
},
|
||||
};
|
||||
}
|
||||
15
tsconfig.json
Normal file
15
tsconfig.json
Normal file
@@ -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"]
|
||||
}
|
||||
Reference in New Issue
Block a user