# Round two: structure, not a reskin The user rejected how similar the first five layouts felt. Create new folders 06–10; leave 01–05 intact. User's previous authorization to delegate each folder persists. Same API, same world; no additional store or fixtures. Do not use Refero for these five: it was restricted to the first two folders. The new brief explicitly authorizes creative direct build and expressive animation. Read CONCEPT_CONTRACT.md for data/context/actions. Its fixed bottom tab bar and exact shell arrangement were constraints of round one; they do NOT constrain this round. Each design must have visibly different composition, navigation location, information density, and interaction model. Avoid the shared visible search → chips → large card → repeated cards → three bottom tabs layout. ## Additional hooks provided by root `mount` now accepts: - `renderShell(ctx, {header,content,nav})`: optional, returns the whole shell INSIDE #app. If omitted existing shell used. Keep `
`, `.app-shell`, `.app-header`, `.app-main`, `.app-nav` classes where helpful but position/rearrange however appropriate. For root `observeHistory`, shared wallet content remains within #app. - `afterRender(ctx, rootElement)`: optional, called after DOM replacement. Use to attach live scroll or local input listeners, restore pager position, and start WAAPI entry/fill transitions. Do not call redraw unconditionally here. - `onAction(action,id,element,ctx)`: optional, return true if you handled a CUSTOM action; false/undefined otherwise. Common actions still use root. Prefix custom actions with concept name to avoid collisions. You may hold presentation state (selected id, accordion open, pager index, filter tray) in your module. Do not store financial/domain data. - `ctx.redraw()` re-renders the current view; `ctx.navigate(page)` uses the shared navigation; `ctx.activeCount`, `ctx.attentionCount`, `ctx.clock` exist. `ctx.allFiltered` is the full filtered/sorted subscription list. `ctx.visible` remains paged (10 at a time). Maintain search/sort/load-more reachability, but hide filters in a native disclosure/tray if they clutter your unique layout. - `ctx.loadUsageFor(idOrIds)` ensures selected subscriptions outside the initial visible ten fetch their usage through the same API. `initialSort:'time'` may be passed to mount for Tempo's chronological default (other sort modes must still work). - `document.body.dataset.page` set to subscriptions/wallet/shop. Default .app-shell also has data-page. All hooks optional and backwards compatible. Keep shared modal controls, confirmations and all 3 main destinations reachable. Style shared wallet/shop/modal components to match your concept and consider distinct wrappers/composition too. ## Distinct composition locks 06 Fluid: immersive whole-canvas one-subscription pager; sky/cyan/blue liquid data fill, oversized numeric value, lower account picker. Navigation as small text tabs in header; no bottom 3-icon bar. Swipe + keyboard-accessible pager. Filling animation meaningful to remaining data. 07 Relay: dense native inbox on white/charcoal with sharp chartreuse markers, compact list rows with ONE expanded row. Pinned contextual action dock, navigation across the top. No large hero card. Expansion/reflow animation and crisp press states. 08 Prism: spatial split dashboard with a slim vertical navigation rail; lilac/violet/electric magenta and bright whites. Selected subscription is decomposed across asymmetric tiles (data/expiry/actions), account picker distinct. No full-width single card or bottom tab bar. Staggered tile entry and fill. 09 Fold: physical expandable folio stack. Persimmon/coral with warm pale canvas; broad overlapping full-width panels, each a subscription; selected one unfolds its facts/actions. Visible inactive spines. Bottom compact navigation can be used here. Elastic accordion motion with clear reading order, keyboard accessible, no 3D unreadable text. 10 Tempo: chronology of access. Editorial monochrome with vermilion accents, large date axis and subscriptions laid out along a vertical expiry timeline with clear sections (expired, today/soon, later). Timeline is primary, not decorative around ordinary cards. Top/bottom navigation unique from others. Animated line drawing/progressive usage meters; do not invent historical data. ## Motion quality User wants impressive animation. Use data fill/reveal, selection continuity, slide/snap, accordion unfolding and button response. Never animate fake random usage or connection quality. Finite loading state must finish. A 600–1000ms once-per-loaded-value fill can be expressive; recurring user actions remain fast. Avoid replaying entry animations on every async render: track presentation keys/first-loaded IDs. Honor reduced-motion for every animation, including WAAPI. Keep text accessible while animation runs. Touch target and technical string correctness still mandatory. Before handoff: node --check, real rendered phone QA at360/390, screenshots, check actual interaction model not only static screenshot. Own only your folder. Root maintains shared files and comparison. Server http://127.0.0.1:8765 if running.