`, with `main` offset only by `lg:ps-16`. The sidebar here is the `w-16` icon rail alone (`Inbox` with a red `4` badge, `Tickets`, `Visitors` active, `Activity`, `Reports`, `Settings`) - there is no second sidebar column and no conversation thread list in this variant.
- Map init (Leaflet, not an image): centre `[51.5074, 15]`, `zoom: 3`, `zoomControl: false`, world `maxBounds` with `maxBoundsViscosity: 1.0`, CARTO `light_all` / `dark_all` tile layers swapped from the stored `hs_theme` value, and 24 hard-coded city data points (London, Paris, Berlin, Rome, Warsaw, Moscow, Tashkent, Jerusalem, Cairo, Tehran, Abuja, New Delhi, Dhaka, Bangkok, Hanoi, Kuala Lumpur, Singapore, Jakarta, Tokyo, New York, Los Angeles, Chicago, Houston, Atlanta) drawn as scaled circles with flag popovers.
- The insight panel is one flex container - `absolute lg:relative inset-x-0 lg:top-0 bottom-0 z-10 p-2 lg:p-5 lg:max-w-md max-h-120 lg:max-h-dvh flex flex-nowrap lg:flex-col gap-2.5` - so the cards scroll horizontally as `w-96` tiles below `lg` and stack in a left column from `lg`, with the scrollbar hidden at every breakpoint.
- It holds exactly 3 cards in this order: `Top countries`, `Referral Traffic`, and `Total sales`. No chat pane, composer, or message list is present despite the block title.
- `Top countries` is a three-column podium (`grid grid-cols-3 items-end`) of decreasing bar heights `h-40` / `h-32` / `h-24`: `United States` `1st` `1,265`, `Germany` `2nd` `1,009`, `United Kingdom` `3rd` `922`, each above a round flag PNG served from the `svg-country-flags` package. The optional `Reports` header link is off in this composition.
- `Referral Traffic` shows a multi-segment progress bar over the names `James Collins`, `Ella Lauda`, `Costa Quinn`, `Amanda Harvey`, `Alisa Grasso`, `Ols Schols` and `215k more`, ending with a `View full reports` link; its avatar group is disabled in this composition.
- `Total sales` pairs a `Today` dropdown trigger with three legend rows - `Store sales` `$51,392` `38.2%`, `Online sales` `$46,420` `5.9%`, `Others` `$39,539` `3.1%` - above an ApexCharts line chart mounted on `#hs-total-sales-lines-chart` (`min-h-29`).
- Dependencies are real: Leaflet (plus `leaflet.css`) for the map, ApexCharts with the third-party chart CSS for the sales chart, and Preline HSOverlay/HSDropdown for the sidebar and card menus. A `lg:hidden` `Menu` button in the top-inline-start corner opens the sidebar overlay.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.