Petal — messages

The chat system, in its current form: a React messaging app built from pink-chat-prompt.md — pink as the material (blush-to-rose surfaces, warm charcoal text), one stem-green accent that always means "act here", and a serif display voice. It evolved from the earlier FOG grey system (spec kept in FOG-chat-system-spec.md); FOG's self-drawing read receipts carry over.

Run

npm install
npm run dev        # local dev server
npm run build      # production build → dist/ (deploy this anywhere static)
npm run preview    # serve the production build locally
npm run artifact   # single-file build → dist-artifact/ (CSP-restricted hosts)

Deploy to Vercel

Vercel auto-detects Vite — no config file needed. Either:

• CLI: npx vercel from the project root (then npx vercel --prod), or
• GitHub: push this repo, then vercel.com → Add New → Project → import — accept the detected settings (build vite build, output dist).

Features

• Login that personalises the app: your name appears in the sidebar, greetings, and contacts' replies; saved to this device (localStorage), with log out. No backend.
• Sidebar of 21 chats (DMs + groups) with avatars, previews, timestamps, unread badges, presence dots; sorted by latest activity; searchable.
• Working conversations: day separators, grouped message runs, autosizing composer (Enter sends, Shift+Enter newlines), send micro-interaction, receipts that draw themselves (sending → delivered → read).
• Simulated contacts: they type (live in the header), reply in character, and unread badges accumulate in chats you're not looking at.
• New Group flow: modal with name field, searchable multi-select contact picker, chips; groups show sender name + avatar per message.
• Light blush / dark plum themes (toggle + OS preference), responsive to mobile with pane navigation, keyboard accessible, prefers-reduced-motion respected.

Structure

src/
  petal.css                design tokens + all component styles
  data.js                  contacts, seeded chats, reply pools, helpers
  store.js                 chat state reducer (open/send/receive/typing/groups)
  App.jsx                  shell + reply simulation timers
  components/
    Sidebar.jsx            chat list, search, New Group, theme toggle
    Conversation.jsx       header, thread, day/turn grouping, receipts
    Composer.jsx           autosizing input + armed send
    GroupModal.jsx         new-group picker
    Avatar.jsx             rose-band initials + presence dot