# Mosaic

Mosaic makes the subscription collection a small Bauhaus workspace: a broad cobalt tile, offset butter and coral tiles, circular remaining-data gauge, square copy controls and a compact top navigation strip. The colored objects are actual subscriptions, in the user's selected sort order. Their shapes do not invent connection health or usage history.

The dialog is a **centered framed control window** with a three-color masthead, dark square frame and coral offset shadow. Subscription details are recomposed into identity, a yellow four-action board, a cobalt usage block, a collapsible facts drawer, and secondary controls. Renewal and purchase choices become two-column plan tile boards. Confirmations carry a large yellow amount panel and fixed tactile action footer. QR gets a white square with a blue print-like shadow against coral. Settings use segmented block groups. This uses `renderDialog` to change the actual composition, not just recolor the shared sheet.

All domain state and workflows use `../shared/app.js` and the single shared API. Local state contains only the search disclosure and completed visual fills. The remaining-data gauge draws for 900ms after the shared usage arrives, records completion only while connected, and obeys reduced motion. Technical usernames stay copyable/selectable and LTR. FA/RTL is the default; EN and light/dark are supported.

Verified using the `mosaic` Playwright session at 360×800 and 390×844: subscriptions, full details and facts disclosure, QR/back, renewal plans/confirmation, purchase plans/confirmation, wallet, settings, themes, English/Persian switching, Escape, partner search among 140 subscriptions, filter recovery, empty account purchase CTA and reduced motion. No page overflow or JavaScript errors were observed in exercised flows. Financial mutations remain the tested shared implementation.

Artifacts: `output/playwright/mosaic-*.png`; reproducible interaction sources `mosaic-qa.js`, `mosaic-flows.js`, `mosaic-finish.js`, `mosaic-collection.js`. Final opaque dialog screenshots use `*-360-fa.png`, and the compact opening screen uses `mosaic-home-final-360-fa.png`.