UI/UX, Accessibility & Navigation Remediation (Phases 0-3)

.claude/launch.json

@@ -21,6 +21,12 @@
         "--dart-define=NVIDIA_API_KEY=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"
       ],
       "port": 8080
+    },
+    {
+      "name": "petfolio-dashboard",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "J:/GitHub/petfolio-dashboard", "run", "dev"],
+      "port": 3000
     }
   ]
 }

.claude/sessions/session-export-1781478847785/00bc3c1f-6403-49fd-968c-e32b72b64903/subagents/agent-a3bf2d60e34c7cd20.meta.json

@@ -0,0 +1 @@
+{"agentType":"Explore","description":"Explore lib features structure","toolUseId":"toolu_01LSxfzZvGA2y9mVVUW4ExvG"}

.claude/sessions/session-export-1781478847785/00bc3c1f-6403-49fd-968c-e32b72b64903/subagents/agent-a4f3c41ae3132b455.meta.json

@@ -0,0 +1 @@
+{"agentType":"Explore","description":"Explore data models and repos","toolUseId":"toolu_01RpBqkQiU9sM1Lb2GxA6i6y"}

.claude/sessions/session-export-1781478847785/00bc3c1f-6403-49fd-968c-e32b72b64903/subagents/agent-a531afcf023479951.meta.json

@@ -0,0 +1 @@
+{"agentType":"Explore","description":"Explore core infrastructure","toolUseId":"toolu_01XAUMkMCCTfxTAUM7BLdL2b"}

.claude/settings.local.json

@@ -189,8 +189,20 @@
       "WebFetch(domain:www.vetsoftwarehub.com)",
       "WebFetch(domain:www.vetstoria.com)",
       "WebFetch(domain:vitusvet.com)",
-      "mcp__62036b11-6fe4-42d7-b814-e64c7714d92c__execute_sql"
-      "Bash(cd /mnt/f/workspace/petfolio && flutter analyze lib/features/appointments/ 2>&1)"
+      "mcp__62036b11-6fe4-42d7-b814-e64c7714d92c__execute_sql",
+      "Bash(cd /mnt/f/workspace/petfolio && flutter analyze lib/features/appointments/ 2>&1)",
+      "mcp__89c78ea8-43b6-40a7-8ff3-e0ad465a8f0e__list_projects",
+      "mcp__89c78ea8-43b6-40a7-8ff3-e0ad465a8f0e__list_tables",
+      "mcp__89c78ea8-43b6-40a7-8ff3-e0ad465a8f0e__get_advisors",
+      "mcp__89c78ea8-43b6-40a7-8ff3-e0ad465a8f0e__list_migrations",
+      "Bash(xargs grep -l \"@riverpod\\\\|NotifierProvider\\\\|AsyncNotifierProvider\\\\|FutureProvider\")",
+      "mcp__89c78ea8-43b6-40a7-8ff3-e0ad465a8f0e__execute_sql",
+      "Bash(xargs wc -l)",
+      "Bash(cd /c/Users/syedr/.claude/projects/J--GitHub-petfolio/776edc4f-b743-44a0-b716-09b79287891f/tool-results/)",
+      "Bash(ls -la)",
+      "Bash(find . -iname \"*list_tables*\" -o -iname \"*advisor*\")",
+      "Read(//c/Users/syedr/.claude/projects/J--GitHub-petfolio/776edc4f-b743-44a0-b716-09b79287891f/tool-results//**)",
+      "Bash(ls -la \"C:/Users/syedr/.claude/plans/\" 2>&1 | head -20)"
     ]
   }
 }

.design-sync/NOTES.md

@@ -0,0 +1,23 @@
+# Design-sync notes — Petfolio
+
+## Setup
+- Shape: `package` (manual bundle — no JS dist; Petfolio is Flutter-native)
+- Bundle authored by hand from Flutter source: CSS tokens, self-contained HTML preview cards, `_ds_bundle.js` as a thin IIFE exporting `window.petfolio.*`
+- No `@types/react`, no esbuild converter run — previews are self-contained HTML, not compiled `.tsx`
+- No playwright render check run (self-contained cards render independently of the bundle)
+- Google Fonts (Sora + Inter) loaded via inline `@import` in each card's `<style>` block — not via `extraFonts`; `[FONT_MISSING]` is expected and acceptable here
+
+## Component inventory (2026-06-19)
+- **Primitives**: PfCard, GlassCard, PrimaryPillButton, PawToggle
+- **Display**: PetAvatar, SectionHeader, PfStatTile, PfBadgeTile, PfDailyQuestRow
+- **Feedback**: SkeletonLoader, PetfolioEmptyState, TailWagLoader
+- **Foundations** (preview-only, no `.d.ts`): Colors, Typography, Spacing, Shadows
+
+## Re-sync risks
+- `_ds_sync.json` is a simplified stub (no `styleSha`/`renderHashes`/`sourceKeys`) — the next re-sync will have no diff anchor and must re-verify all components from scratch
+- Card HTML files are self-contained (inline styles + Google Fonts CDN) — any token changes in `tokens/*.css` must be manually mirrored inside each card's `<style>` block too
+- `_ds_bundle.js` is hand-authored; `window.petfolio.*` exports are not derived from Flutter source automatically — add new components manually on each re-sync
+- Google Fonts CDN dependency: cards require internet access to render with correct typography (Sora, Inter)
+
+## Known render warns
+None — render check not run (self-contained cards).

.design-sync/config.json

@@ -0,0 +1,8 @@
+{
+  "shape": "package",
+  "pkg": "petfolio",
+  "globalName": "petfolio",
+  "projectId": "b0f1170c-aa43-40e8-89b2-ef29a27b18ec",
+  "readmeHeader": ".design-sync/conventions.md",
+  "localDir": "ds-bundle"
+}

.design-sync/conventions.md

@@ -0,0 +1,65 @@
+# Petfolio Design System — Agent Conventions
+
+## Setup and wrapping
+
+No root provider or theme wrapper required. Components are available directly from `window.petfolio.*` after `_ds_bundle.js` loads. All styling is driven by CSS custom properties defined in `styles.css` (and its imports). Light mode is the default; apply `data-theme="dark"` to `<html>` or any ancestor for dark mode.
+
+Load order: `styles.css` → `_ds_bundle.js` → mount components.
+
+```html
+<link rel="stylesheet" href="styles.css">
+<script src="_ds_bundle.js"></script>
+```
+
+## Styling idiom — CSS custom properties
+
+All design decisions are expressed as `var(--pf-*)` tokens. Never hardcode hex values; always reference a token. The full token vocabulary is in `tokens/colors.css`, `tokens/typography.css`, `tokens/spacing.css`, and `tokens/shadows.css`.
+
+**Key token families:**
+
+| family | examples |
+|---|---|
+| Pillar accents | `--pf-tangerine`, `--pf-poppy`, `--pf-mint`, `--pf-sunny`, `--pf-lilac`, `--pf-sky` |
+| Soft fills | `--pf-tangerine-soft`, `--pf-mint-soft`, `--pf-lilac-soft` (light tinted backgrounds) |
+| Ink / text | `--pf-ink-950` (headings), `--pf-ink-700` (body), `--pf-ink-500` (muted), `--pf-ink-300` (placeholder) |
+| Surfaces | `--pf-surface-0` (#fff), `--pf-surface-1` (cream), `--pf-surface-2`, `--pf-surface-3` |
+| Lines | `--pf-line` (#F4E2CB warm border), `--pf-line2` (slightly darker) |
+| Radius | `--pf-radius-sm/md/lg/xl/2xl/3xl/pill`, `--pf-squircle-card` (24px) |
+| Spacing | `--pf-space-xs/sm/md/lg/xl/2xl/3xl` (4→64px) |
+| Shadows | `--pf-shadow-e1` through `--pf-shadow-e4`, `--pf-shadow-glass` |
+| Typography | `--pf-font-display` (Sora), `--pf-font-sans` (Inter) |
+
+**For layout glue** (dividers, gaps, padding) use spacing tokens. For component fills, always pick from the pillar or surface palette.
+
+## Where the truth lives
+
+- **Token reference**: read `styles.css` and its `@import` chain before writing any colour, spacing, or shadow value.
+- **Component API**: each component folder has a `<Name>.prompt.md` with props table, state guide, and usage snippets.
+- **Component CSS classes**: defined in `_ds_bundle.css` — `pf-card`, `pf-btn`, `pf-avatar`, etc.
+
+## Idiomatic build example
+
+```jsx
+// Pet profile card — uses PfCard + PetAvatar + PrimaryPillButton + SectionHeader
+function PetProfileCard({ pet }) {
+  return (
+    <div style={{ background: 'var(--pf-surface-1)', minHeight: '100vh' }}>
+      <SectionHeader label="Your Pets" action={<span style={{ color: 'var(--pf-tangerine)', fontSize: 13, fontWeight: 600 }}>Edit</span>} />
+      <div style={{ padding: '0 var(--pf-space-md)' }}>
+        <PfCard elevated padding={16}>
+          <div style={{ display: 'flex', gap: 'var(--pf-space-md)', alignItems: 'center' }}>
+            <PetAvatar species="dog" size="xl" showRing />
+            <div>
+              <div style={{ fontFamily: 'var(--pf-font-display)', fontSize: 20, fontWeight: 700, color: 'var(--pf-ink-950)' }}>Biscuit</div>
+              <div style={{ fontSize: 14, color: 'var(--pf-ink-500)', marginTop: 2 }}>Golden Retriever · 3 yrs</div>
+            </div>
+          </div>
+          <div style={{ marginTop: 'var(--pf-space-md)' }}>
+            <PrimaryPillButton label="View Care Routine" isFullWidth />
+          </div>
+        </PfCard>
+      </div>
+    </div>
+  );
+}
+```

.gitignore

@@ -150,3 +150,10 @@ tmp_home/
 .vercel/output/
 .vercel/*.json
 !.vercel/project.json
+test/core/theme/failures/app_theme_dark_isolatedDiff.png
+test/core/theme/failures/app_theme_dark_maskedDiff.png
+test/core/theme/failures/app_theme_dark_testImage.png
+test/core/theme/failures/app_theme_light_isolatedDiff.png
+test/core/theme/failures/app_theme_light_maskedDiff.png
+test/core/theme/failures/app_theme_light_testImage.png
+/.claude/sessions