Add directory and design docs, browse eval action, tighter gitignore

docs/design.md

@@ -0,0 +1,68 @@
+# Design language
+
+Visual reference for the apps, extracted from the existing directory app. Colors are sampled from live captures; treat them as the working palette until original brand assets arrive.
+
+## Palette
+
+Brand:
+
+| Color | Hex | Use |
+|---|---|---|
+| Brand teal | `#014E54` | Canonical brand color (the app manifest's theme color): login backdrop, detail-page family bands, role/title small-caps labels, primary buttons. Renders near `#1f4d53` in the UI |
+| Sidebar teal | `#173c41` | Sidebar background (darkest surface) |
+| Teal highlight | `#2f5054` | Selected sidebar item |
+| Band row teal | `#29555b` | Row highlight inside dark bands |
+| Sun yellow | `#fee000` | Large sun disc in the logo lockup; celebratory accent |
+| Sun orange | `#f68d1e` | Small disc standing in for the wordmark's "o", overlapping the sun |
+| Overlap red | `#ef563f` | Where the two discs overlap |
+| Brush lime → green | `#69c01f` → `#0b963e` | Gradient of the "Who?" brush script and its underline |
+
+Neutrals:
+
+| Color | Hex | Use |
+|---|---|---|
+| White | `#ffffff` | Content background, cards |
+| Row gray | `#f5f5f5` | List rows, zebra sections |
+| Input gray | `#efefef` | Search fields, filter buttons |
+| Ink | `#0d0d0d` | Headings, names, values |
+| Muted | `#707070` | Secondary lines, field labels |
+
+Grade-band colors (mascot tile grounds, one per band):
+
+| Band | Hex | Classrooms |
+|---|---|---|
+| Kindergarten | `#d20210` red | Hummingbirds |
+| 1st / 2nd | `#f55e03` orange | Hawks, Falcons |
+| 3rd / 4th | `#fec502` yellow | Jays, Ravens |
+| 5th / 6th | `#488925` green | Condors, Ospreys |
+| 7th / 8th | `#0047af` blue | Herons, Egrets |
+
+The app is light-on-white; dark teal is reserved for the sidebar, the family band on detail pages, and emphatic buttons. Small-caps labels reuse the deep teal as text ink, which ties the light pages to the brand without more color.
+
+## Logo and identity
+
+- The lockup: "Helios" in a light-weight white geometric sans, its "o" replaced by a small orange disc overlapping a much larger yellow sun disc (red where they overlap), with "Who?" sweeping underneath in a lime-to-green gradient brush script, finished with a brush underline. It sits on the brand teal.
+- The app icon and splash art are the same lockup.
+- The wordmark's geometric face appears only in the logo artwork; it is not the UI font.
+- Actual raster assets pulled from the existing app live locally (uncommitted) in `screenshots/brand/`: favicons (16, 32), app icons (192, 512, plus maskable variants), the full-lockup splash (2732×2048), and the PWA manifest. Vector originals still need to come from the school.
+
+## Classroom mascots
+
+The nine classrooms are birds — Hummingbirds (K); Hawks and Falcons (1st/2nd); Jays and Ravens (3rd/4th); Condors and Ospreys (5th/6th); Herons and Egrets (7th/8th). Each classroom tile is a square: bird silhouette art (black, or black and white for the water birds) over a yellow sun disc on the band's ground color, named in white brush script. Grade tiles reuse the system, combining both of the band's birds in one composition ("Grade 1" shows hawk and falcon together); Kindergarten's grade tile is a mirrored hummingbird variant. People without photos use a soft illustrated bird avatar in the same spirit.
+
+Original tile art (1254×1254 JPEGs for all nine classrooms and all nine grade tiles) lives locally (uncommitted) in `screenshots/brand/classrooms/`, with a `contact-sheet.png` overview.
+
+## Typography
+
+- The UI font is **Inter**, loaded from Google Fonts in weights 400, 500, 600, 700, 800 (`fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800`), with the fallback stack `-apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`. Body text is weight 400; the weights observed in use are 400/500/600.
+- The existing app also loads Roboto (400/500/700/900) and Roboto Mono for its raw data grid; the clone does not need them.
+- Hierarchy: bold page headings; semibold names; letterspaced ALL-CAPS micro-labels in brand teal for roles, titles, and section badges; regular body; muted gray secondary text; italics for pronunciation lines.
+- The brush script appears only in brand and mascot artwork, never as UI text.
+
+## Shape language
+
+- Circular avatars for people; rounded-rectangle (~12px radius) cards, photos, and mascot tiles.
+- Pill-shaped search inputs and filter buttons; circular icon buttons for quick actions (message, mail, map, favorite).
+- List rows with right chevrons; hairline dividers; generous whitespace.
+- Detail pages break the white page with a full-width deep-teal band for family content.
+- Inline separators: "▶" chains grade to team to subteam; "·" dots separate contact fragments.

docs/directory.md

@@ -0,0 +1,70 @@
+# Directory app
+
+The directory ("Helios Who?") is the community's who's-who: students, parents, and staff, browsable by person, family, classroom, and grade. It exists to help people connect — put a face to a name after a conversation at pickup, find a classmate's parents to plan a party, get someone's name pronunciation right. Photos and facts are collected from families each year and are updatable at any time.
+
+## Entities
+
+- **Person** — first and last name; role (student, parent, staff); optional pronouns; optional nickname and pronunciation; photo (some people use an illustrated avatar instead); email; role-specific fields:
+  - *Students*: grade, classroom and team assignment (displayed as a chain, e.g. grade ▶ team ▶ subteam), optional free-text "about me" written by or about the kid.
+  - *Parents*: their kids (shown as context wherever the parent appears), optional room-parent assignments.
+  - *Staff*: job title, displayed prominently; staff may have no family record.
+- **Family** — the join between adults and kids: combined surname(s), family photo with a caption identifying everyone in it, member list split into adults and kids, address, phone. Lists show the city; the full address powers map actions.
+- **Classroom** — name and mascot artwork, the grade band it serves, and its students, staff, and parents. Classrooms nest teams/subteams that student rows reference.
+- **Grade** — K through 8, grouped into bands (K, 1st/2nd, 3rd/4th, ...) for browsing.
+
+## Navigation
+
+A persistent sidebar carries the app identity, the section list, and the signed-in user. Sections:
+
+### People (home)
+
+Four tabs, each with search and filter:
+
+- **Everyone** — grid of circular photos. Each card: role label with pronouns (e.g. "PARENT (SHE/HER)"), name, and a context line — kids' names for parents, grade/team chain for students, job title for staff.
+- **Students** — larger cards, first name prominent over last name, grade/team chain, pronouns badge.
+- **Families** — family-photo cards with grade badges, surname combination, and kids' first names.
+- **Staff** — grouped into sections (admin and office staff, teaching staff, ...), title over name.
+
+### Person detail
+
+Breadcrumb back to the list, favorite (heart) toggle, photo, role label with pronouns, name with nickname/pronunciation line, grade/team chain for students, email and address rows with quick actions (message, mail, map). Students add the "about me" paragraph. Below, a contrasting family band: the person's family name, a narrative caption of who's who, kid rows (grade/team, email), adult rows, and a link to the family page.
+
+### Family detail
+
+Family photo with click-to-expand and its identifying caption, grade badges, family name, member first-names, city with message/map actions, and a members section split into adults and kids, each row linking to the person.
+
+### Classrooms
+
+Three tabs: browse classrooms by grade band (mascot art, student count, link to detail), the same grouped by classroom, and room parents (parent rows annotated with each of their kids' classroom and grade). Classroom detail shows the mascot, name, and tabbed member lists — students (grouped by team, with parents' names above each student and the about-me blurb inline), staff, and parents — with per-tab counts.
+
+### My Family
+
+A shortcut card to the signed-in user's own family page.
+
+### Staff
+
+The staff list as a top-level section — same content as the People staff tab.
+
+### Map
+
+A map of family locations, plus an "update my address" self-service action.
+
+### Email List
+
+A copyable/exportable contact table for party planning and outreach: full name, email, role, grade, classroom. Tabs narrow to parents, students, both, or the user's bookmarked people. Filters select grades or classrooms. Includes a note that young students (K-2) have assigned email addresses but no access to them yet.
+
+### Data View
+
+A raw tabular view over the underlying records, for power users.
+
+### Share & About
+
+Share the app by SMS or link, an explanation of why photos and facts are collected, a bug-report pointer, and an opt-out form for removing a person's information.
+
+## Behaviors
+
+- Everything is cross-linked: parents ↔ kids ↔ families ↔ classrooms; any person reference navigates to that person.
+- Search is per-list and immediate; filters cover grade and classroom.
+- Favorites/bookmarks mark people and feed the email list's bookmark tab.
+- Photos lazy-load; full-size view on click where the photo is the subject (family pages).
+- All data is community-only, behind sign-in; opt-out removes a person on request.