docs(mockups): static HTML wireframes for Library scaling concepts

Renders the five design concepts from _bmad-output/planning-artifacts/library-many-frames-design-ideas.md as standalone HTML so Matt can compare them in a browser without spinning up the SPA. Mockups live at /mockups/library/ and reuse the project's design tokens for visual consistency: index.html landing page with concept links current.html the chip-explosion state we're shipping today concept-a.html photo + status badge → DevicePicker sheet (recommended) concept-b.html device-first tab concept-c.html multi-select bulk action bar concept-d.html device chip filter + photo dots Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 15:08:18 -04:00
parent a511b89564
commit 9854688a49
8 changed files with 1102 additions and 0 deletions
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Library — design concepts</title>
+<link rel="stylesheet" href="shared.css">
+<style>
+  body { padding: var(--space-6); }
+  .wrap { max-width: 720px; margin: 0 auto; }
+  h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
+  p { color: var(--color-text-muted); line-height: 1.5; }
+  ul.concepts { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
+  ul.concepts a {
+    display: block; padding: var(--space-4); border-radius: var(--radius-md);
+    background: var(--color-surface); border: 1px solid var(--color-border);
+    text-decoration: none; color: inherit;
+  }
+  ul.concepts a:hover { border-color: var(--color-primary); }
+  ul.concepts h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
+  ul.concepts small { color: var(--color-text-muted); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Library page — scaling to many frames</h1>
+  <p>Static HTML wireframes for the five concepts in the BMAD design memo. Each
+     uses the same design tokens as the real Vue app, fake content set at five
+     devices and ten photos so chip-count pain is visible.</p>
+
+  <ul class="concepts">
+    <li><a href="current.html">
+      <h2>🚫 Current state (for reference)</h2>
+      <small>What's shipping today. Five chip-buttons per photo × twice
+             (approve + lock) at N=5 frames.</small>
+    </a></li>
+    <li><a href="concept-a.html">
+      <h2>🅐 Photo card + status badge → DevicePicker sheet (recommended)</h2>
+      <small>Strip the card to image + one-line summary. Tap photo opens the
+             existing DevicePicker bottom sheet.</small>
+    </a></li>
+    <li><a href="concept-b.html">
+      <h2>🅑 Device-first tab</h2>
+      <small><code>My Photos</code> / <code>By Frame</code> toggle. By-Frame
+             groups photos by device row.</small>
+    </a></li>
+    <li><a href="concept-c.html">
+      <h2>🅒 Multi-select + bulk action bar</h2>
+      <small>Long-press a photo to enter selection mode. Top bar morphs to
+             Send-to/Lock/Delete.</small>
+    </a></li>
+    <li><a href="concept-d.html">
+      <h2>🅓 Device chip filter + photo dots</h2>
+      <small>Top row of device chips filters the grid. Each photo shows tiny
+             dots for the other frames it's on.</small>
+    </a></li>
+  </ul>
+</div>
+</body>
+</html>