# Third exploration: ten distinct applications, including their dialogs The user loves round two and asks for TEN MORE, more different from one another, explicitly including modals. Create 11–20, preserve 01–10. One dedicated design agent per folder. Do not use Refero: the user's allocation remains original folders 01 and 02. Direct creative build is authorized. Read REDESIGN_BRIEF.md for substance, CONCEPT_CONTRACT.md for shared controls, and ROUND_TWO.md for shell/action hooks. Prior prescribed layouts do not constrain this round. ## Shared runtime and new dialog hooks Root owns shared/. Each agent owns only their numbered folder. Static HTML/CSS/ES modules; import mount from ../shared/app.js. Never create a mock store, API or financial logic. Presentation state is allowed. Use local font ../shared/assets/vazirmatn.woff2 and SVG/CSS. Default subscriptions, Persian RTL with English, themes, 360px phones first. All shared operations and errors must remain reachable. Search/sort/pagination may live in a disclosure; ctx.allFiltered and ctx.loadUsageFor(id) exist. Root is adding these optional mount hooks before your first QA: `renderDialog(ctx, parts)` returns the HTML INSIDE the native dialog. `parts` contains: - `title` (trusted translated HTML), `body` (all working content HTML), `actions` (working confirmation/renew/footer buttons), `backButton`, `closeButton`, `header` (default complete header), `kind` (detail, qr, rename, settings, confirmation, loading, renew-plans, purchase-plans, configs, import, content, etc.), `hasBack`. - `blocks`: an array of top-level HTML fragments from body. Use it to give content a different composition without dropping features. In detail, e.g. move facts into a disclosure, place action grids before metrics, group identity/usage in a header panel. It is fine to construct a template DOM locally for presentation-only rearrangement. - Always include exactly one `.sheet-header` containing `

${parts.title}

` and `parts.closeButton` (and parts.backButton if supplied). Keep `.sheet-body` around ALL body content with ``. Include `.sheet-actions` for parts.actions. These classes are the shared runtime's functional hooks. You may wrap/reorder them. Do not duplicate or discard real form fields/buttons, confirmations, error notices or financial descriptions. - Root sets `dialog.dataset.kind` and `dialog.dataset.concept` for CSS variants. Native dialog focus trapping, Escape, outside-click dismissal and Telegram Back remain shared. `afterDialog(ctx, dialogElement, parts)` runs after markup and showModal. Use finite entrance/content motion, optional presentation listeners. Honor reduced motion. Do not add listeners to global document repeatedly. Root calls this each content transition, not only first open. `parts.opening` indicates whether dialog was previously closed. Each concept MUST use renderDialog and give details, plans/purchase confirmation, QR, settings and error/loading content a consistent yet distinctive spatial treatment. The user explicitly dislikes common modals merely recolored. Restructure inner content as appropriate, use different geometry/entry direction, footer placement, typography, controls and backdrop. Modal contrast, scrollability at 360×800 and focus are mandatory. Native dialog default `.sheet` positioning must be explicitly overridden for your chosen form. ## Direction locks (do not average them together) 11 Mosaic — Bauhaus color-block workspace. Primary blue, red, buttery yellow, off-white. Subscription collection as asymmetric modular tiles; active takes a wide tile, attention accounts occupy compact adjacent tiles. Grid composition and square tactile controls, no conventional card feed. Dialog: centered framed control window, multicolor masthead, distinct block groups and chunky action footer; plan options become a structured tile board. 12 Ribbon — panoramic horizontal subscription strips with horizontal snap exploration and a vertical edge index. Ultramarine on warm butter, giant narrow ribbons of data, slim utility tab navigation. Dialog: full-height edge drawer with a visible vertical spine, sideways reveal, content divided into horizontal bands; footer as an inline side strip where width permits. Show selected identity clearly, provide arrow/button alternatives to swiping. 13 Vector — precise native command console. Near-black/white with electric mint sparingly, typographic flat account rows, small data columns and a large selected readout integrated into the table header; no rounded hero/card grid. Dialog: top-attached command palette with command-bar header, ruled sections, keyboard-like controls and compact plan rows. Financial confirmation remains clear, never a fake terminal command. 14 Bloom — soft organic subscription garden: petal-shaped selection controls surrounding a useful central data readout, plum/rose/sage on milk. Actual accounts form petals, never invented connection metrics. Handle many via searchable collection tray. Dialog: softly rounded centered petal panel, organic offset backdrop, wide inset action buttons, identity and data as a quiet cover; disclosures for detailed facts. No unreadable curved text. 15 Ledger — a native pocket notebook: narrow indexed account tabs against a ruled open page, left/right margin numbers, quiet ink blue on cream, handwriting-like accent through code strokes only. Selected subscription reads as an open ledger page, not a generic card. Dialog: full-screen notebook spread with binding/margin, fixed page heading, facts in ruled entries, actions in a separate page footer; plans as numbered lines, QR as pasted square slip. 16 Sprint — energetic typographic scoreboard. Acid yellow/graphite, condensed-looking bold figures, subscriptions as ranked horizontal remaining-data lanes (sorting remains explicit), angled controls and strong type. No invented speed/latency or connection status. Dialog: angular lower action stage with offset shadow, large task number/heading, horizontally organized plan lanes and unmistakable financial total; snappy vertical reveal. 17 Haze — luminous glass split-view app. Ice/steel/lilac aurora made in CSS, slim subscription list beside a dominant transparent selected inspector even on phone. Functional account list drives the scene; no decorative chart. Dialog: full-viewport translucent scene with a floating header capsule and floating action capsule; body panels organized as glass panes. Use readable opaque-enough surfaces and graceful no-backdrop-filter fallback. 18 Stamp — a graphic stamp collection of subscriptions. Warm white, petrol blue and vermilion, offset two-column postage-stamp grid with perforated edges; selected stamp flips/reveals a useful action face (respect reduced motion, no inaccessible back face). Dialog: narrow centered receipt roll with torn/perforated edges, sequential printed facts, plan coupons and a tear-off confirmation footer. No fake tracking/order identifiers. 19 Circuit — diagram as navigation. Thin black/blue schematic branches connect the actual user/account to owned subscription nodes; selected node opens an inline instrument. Ivory with cobalt/copper. This is an ownership hierarchy, not invented VPN network topology. Dialog: square inspection window with a contrasting vertical status gutter, segmented sections and structured fact matrix; nested plan/confirmation views feel like an inspector, not a bottom sheet. 20 Pulse — a subscription control deck inspired by native media players. Deep aubergine + tangerine, selected account with broad horizontal data waveform bars representing only a single actual remaining fraction (no fake usage history), big previous/next controls and a compact queue drawer. No play/connect toggle: primary action clearly copies/imports access. Dialog: stacked player panels with a small persistent identity strip above a distinct task pane; compact settings as menu rows, plans as selectable album-like tiles, confirmation as a bold amount panel. Different from generic full-screen and bottom-sheet shells above. ## Motion and QA Finite, meaningful fills and responsive selection continuity. Root batches usage into one final render so fills can finish. Other async renders may replace nodes: record animation keys on completion on a still-connected element, or resume progress. Do not permanently mark an entry seen before its animation can display. Entry 400–900ms, selection 150–400ms, all reduced-motion-aware including WAAPI. Do not animate money or fabricate metrics. Use Playwright CLI with a unique session; server http://127.0.0.1:8765. Cache-disable via page.route('**/*', r => r.continue()). Every concept must be actually viewed at 360/390, fa/en, light/dark. Inspect subscription detail, purchase/renewal confirmation, QR and settings modal, including scroll to actions, Escape and close/back. Test your unique selection/navigation plus partner search and empty state. Root tests shared integration and comparison. Put QA scripts/screenshots in output/playwright/-*. Own folder should end with index.html, app.js, style.css, DESIGN.md. No repeated broad tests once they pass. Tell root when first usable render is ready, then finish autonomously.