chore: merge executor worktree (worktree-agent-af89750bf86857964)
This commit is contained in:
Lucas Berger
@@ -0,0 +1,149 @@
|
||||
---
|
||||
phase: 17-ui-optimization-polish
|
||||
plan: "02"
|
||||
subsystem: ui
|
||||
tags: [pwa, icons, branding, svg, vite-pwa, assets-generator, logo]
|
||||
|
||||
# Dependency graph
|
||||
requires: []
|
||||
provides:
|
||||
- "Approved FamilySync logo SVG (warm peach gradient bg, amber roof, bold white walls, heart finial, three family figures)"
|
||||
- "Full PWA icon/favicon set derived from approved logo: favicon.svg, favicon.ico, icon-192.png, icon-512.png, icon-maskable-512.png (512x512 safe-zone), apple-touch-icon.png (180x180)"
|
||||
- "@vite-pwa/assets-generator devDependency + pwa:icons script in apps/pwa"
|
||||
- "Brand accent decision: --color-member-0 → #e8915a (warm amber)"
|
||||
- "Brand logo border-radius decision: --brand-logo-border-radius: 0 (SVG draws its own shape)"
|
||||
affects: [17-04]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added:
|
||||
- "@vite-pwa/assets-generator@1.0.2 (devDependency in apps/pwa)"
|
||||
- "sharp (transitive, for PNG rasterisation)"
|
||||
- "sharp-ico (transitive, for ICO encoding)"
|
||||
patterns:
|
||||
- "pwa-assets.config.ts: minimal2023Preset, images: ['public/logo.svg'], no overrideManifestIcons"
|
||||
- "pnpm pwa:icons regenerates the full set from logo.svg on demand"
|
||||
|
||||
key-files:
|
||||
created:
|
||||
- "apps/pwa/pwa-assets.config.ts — @vite-pwa/assets-generator config (minimal-2023 preset)"
|
||||
- "apps/pwa/public/logo.svg — approved brand mark (hand-authored, warm/family-house)"
|
||||
- "apps/pwa/public/favicon.svg — copy of logo.svg for SVG favicon"
|
||||
- "apps/pwa/public/favicon.ico — 48px ICO from generator (967 B)"
|
||||
- "apps/pwa/public/icon-192.png — 192x192 standard PWA icon"
|
||||
- "apps/pwa/public/icon-512.png — 512x512 full-bleed PWA icon"
|
||||
- "apps/pwa/public/icon-maskable-512.png — 512x512 maskable with safe-zone padding"
|
||||
- "apps/pwa/public/apple-touch-icon.png — 180x180 Apple touch icon"
|
||||
modified:
|
||||
- "apps/pwa/package.json — added @vite-pwa/assets-generator devDep + pwa:icons script"
|
||||
|
||||
key-decisions:
|
||||
- "Logo approved: higher-contrast family-house SVG with warm peach gradient background, amber gradient roof, bold white house body, heart finial, two parent figures (rose + blue) flanking a child figure (gold)"
|
||||
- "Brand accent approved: --color-member-0 → #e8915a (warm amber) — apply in tokens.css, index.html theme-color, vite.config.ts theme_color in plan 17-04"
|
||||
- "--brand-logo-border-radius: 0 — SVG draws its own rounded-square background (rx=104); no additional CSS clip needed; apply in plan 17-04"
|
||||
- "Generator preset: minimal2023Preset without overrideManifestIcons — vite.config.ts manifest maintained by hand (plan 17-04)"
|
||||
- "favicon.svg is an exact copy of logo.svg; modern browsers prefer SVG favicon over ICO"
|
||||
|
||||
patterns-established:
|
||||
- "Icon regeneration: cd apps/pwa && pnpm pwa:icons — always runs from apps/pwa to resolve pwa-assets.config.ts paths correctly"
|
||||
- "Asset source of truth: apps/pwa/public/logo.svg — all derived assets regenerated from it"
|
||||
|
||||
requirements-completed: [D-03, D-04]
|
||||
|
||||
# Metrics
|
||||
duration: 35min
|
||||
completed: 2026-06-18
|
||||
status: complete
|
||||
---
|
||||
|
||||
# Phase 17 Plan 02: Branding Assets Summary
|
||||
|
||||
**Approved FamilySync family-house logo SVG committed with full 7-asset PWA icon set derived via @vite-pwa/assets-generator minimal-2023 preset; brand accent #e8915a and --brand-logo-border-radius: 0 recorded for plan 17-04**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** ~35 min (including human checkpoint for logo approval)
|
||||
- **Started:** 2026-06-18T12:00:00Z
|
||||
- **Completed:** 2026-06-18T12:45:00Z
|
||||
- **Tasks:** 3 (Tasks 1+2 auto, Task 3 human checkpoint, continuation applied approved art)
|
||||
- **Files modified:** 9
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- Installed `@vite-pwa/assets-generator@1.0.2` in `apps/pwa` with `pnpm pwa:icons` script
|
||||
- Hand-authored warm/rounded/at-home FamilySync logo SVG; replaced with operator-approved higher-contrast redesign post-checkpoint
|
||||
- Generated complete icon/favicon set (favicon.ico 967 B, maskable 512x512 with safe-zone, apple-touch 180x180, standard 192 and 512 PNGs)
|
||||
- Captured three operator brand decisions required by plan 17-04 (logo art, accent hex, border-radius)
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Install @vite-pwa/assets-generator, author logo.svg, add pwa-assets.config.ts** - `7db9005` (feat)
|
||||
2. **Task 2: Generate the full icon/favicon set and validate formats** - `b364573` (feat)
|
||||
3. **Task 3 (post-checkpoint continuation): Apply approved logo + regenerate icon set** - `4c99470` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `apps/pwa/package.json` — added `@vite-pwa/assets-generator@1.0.2` devDependency + `"pwa:icons"` script
|
||||
- `apps/pwa/pwa-assets.config.ts` — generator config: `minimal2023Preset`, `images: ['public/logo.svg']`, no `overrideManifestIcons`
|
||||
- `apps/pwa/public/logo.svg` — approved brand mark (1926 B): warm peach gradient bg (rx=104), amber roof gradient, bold white walls, heart finial (#F25C7A), family of three (rose parent + gold child + blue parent)
|
||||
- `apps/pwa/public/favicon.svg` — copy of logo.svg (SVG favicon for modern browsers)
|
||||
- `apps/pwa/public/favicon.ico` — 48px ICO, 967 B (non-trivial; replaces zero-byte stub)
|
||||
- `apps/pwa/public/icon-192.png` — 192x192 standard PWA icon (2869 B)
|
||||
- `apps/pwa/public/icon-512.png` — 512x512 full-bleed PWA icon (12056 B)
|
||||
- `apps/pwa/public/icon-maskable-512.png` — 512x512 maskable icon with safe-zone padding (8627 B; distinct from icon-512.png)
|
||||
- `apps/pwa/public/apple-touch-icon.png` — 180x180 Apple touch icon (1744 B)
|
||||
|
||||
## Decisions Made
|
||||
|
||||
### APPROVED BRAND DECISIONS FOR PLAN 17-04
|
||||
|
||||
These three decisions were explicitly approved by the operator at the Task 3 checkpoint and MUST be consumed verbatim by plan 17-04:
|
||||
|
||||
1. **Logo art: APPROVED** — the redesigned higher-contrast family-house SVG is the canonical FamilySync brand mark. No further logo revision needed before plan 17-04 wiring.
|
||||
|
||||
2. **Brand accent: `#e8915a` (warm amber)**
|
||||
- Apply to `tokens.css` as `--color-member-0: #e8915a`
|
||||
- Apply to `index.html` `<meta name="theme-color">` as `#e8915a`
|
||||
- Apply to `vite.config.ts` manifest `theme_color` as `#e8915a`
|
||||
|
||||
3. **`--brand-logo-border-radius: 0`**
|
||||
- The SVG draws its own rounded-square background (`rx="104"` on the background rect)
|
||||
- No additional CSS `border-radius` clip needed on the `<img>` element in BrandSlot
|
||||
- Apply as `--brand-logo-border-radius: 0` in `tokens.css`
|
||||
|
||||
### Generator setup decisions
|
||||
|
||||
- `minimal2023Preset` from `@vite-pwa/assets-generator/config` — handles safe-zone math for maskable, ICO encoding via sharp-ico, and standard sizes
|
||||
- `overrideManifestIcons: true` was deliberately NOT set — the manifest is maintained by hand in `vite.config.ts` (plan 17-04 responsibility)
|
||||
- `favicon.svg` is a direct copy of `logo.svg`; the generator does not produce a separate favicon.svg so the `pwa:icons` script copies it
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None — plan executed exactly as written. The continuation agent applied the operator-approved logo replacement and regenerated all icons atomically after the checkpoint was cleared.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
- `sharp` module not resolvable from worktree root for metadata validation — resolved by using Python's PNG IHDR header parser instead to confirm dimensions (512x512 maskable, 192x192 standard, 180x180 apple-touch). Generator output confirmed valid.
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None — no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
Plan 17-04 (brand wiring) can proceed immediately. It has all three required inputs:
|
||||
- Logo source: `apps/pwa/public/logo.svg` (committed)
|
||||
- Brand accent: `#e8915a`
|
||||
- Logo border-radius: `0`
|
||||
|
||||
Files 17-04 will wire:
|
||||
- `apps/pwa/src/styles/tokens.css` — `--color-member-0`, `--brand-logo-border-radius`
|
||||
- `apps/pwa/index.html` — `<meta name="theme-color">`, favicon `<link>` tags
|
||||
- `apps/pwa/vite.config.ts` — manifest `theme_color`, `icons` array
|
||||
- `apps/pwa/src/components/BrandSlot.tsx` — wire `<img src="/logo.svg">`
|
||||
|
||||
---
|
||||
*Phase: 17-ui-optimization-polish*
|
||||
*Completed: 2026-06-18*
|
||||
Reference in New Issue
Block a user