@moeve-ui/ui 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# @moeve-ui/ui
+
+Moeve/Redinamic component library, published as `@moeve-ui/ui` under the `moeve-ui` npm organization. This is an **independent** project, not tied to any particular app - today it's used by `kairos-frontend` (Impact Simulator), but it's meant to be reused across future projects, the same way an equivalent Vite + MUI library was built before.
+
+It's built with [`tsup`](https://tsup.egoist.dev/) into a compiled `dist/` (ESM + CJS + `.d.ts`), so consumers just `npm install @moeve-ui/ui` like any other package - no `transpilePackages` or knowledge of our TS setup required on their end.
+
+## ⚠️ About this delivery's tests (read before running `npm test`)
+
+Same as with the rest of the project, this was written without access to the npm registry (blocked in the environment I work in), so **I was never able to install vitest or @testing-library, and I never actually ran a single one of these 15 tests.** I'm not going to tell you "it's tested" without having seen it pass.
+
+What I did do:
+
+- Wrote each test by reading the actual code of the component it tests (no invented behavior) - assertions based on the classes/text the component actually renders.
+- Built a minimal type shim for `vitest` and `@testing-library/react` (in the same manual type-checker I use for the whole project) and ran `tsc --noEmit` over the 15 tests - 0 syntax/type errors.
+- That review already found and fixed 3 real issues before delivering this to you:
+  1. **A real bug in `MiniMapCard`**: it rendered `{overlayLinkLabel} ({competitorCount})`, and whoever uses it in `kairos-frontend` (`DecisionFactorsCard.tsx`) already includes the count inside `overlayLinkLabel` - the result on screen was `"Basado en 3 competidores clave (3)"`, duplicated. The component was fixed (see `src/molecules/MiniMapCard/MiniMapCard.tsx`).
+  2. One of my `CompetitorRow` tests had the `trend` color inverted (I assumed "competitor's price going up = bad = red", but the component intentionally paints it the other way around: if the competitor raises their price it's a good competitive signal for us = green). I fixed it to reflect the real behavior, not what I expected.
+  3. A `PriceRangeSlider` test with `value` equal to `currentPrice` would have failed with "multiple elements found" (the component renders that number twice on screen - the tooltip and the current price). Just like a real UI bug, only in the test.
+
+What I **couldn't** verify: that the tests actually pass (`vitest run`), or that the type shim captures 100% of those libraries' real API. Run `npm install && npm test` on your Mac (regular Terminal) and let me know what breaks - at this level of review I expect it to be little, but I won't claim it without having run it.
+
+## What's included
+
+- **Design tokens** (`src/tokens/colors.ts`) - the single source of truth for brand colors, extracted from the "Redinamic-tec" Figma file. `tailwind.preset.ts` exposes them as a Tailwind preset.
+- **Custom icon set** (`src/icons/`) - plain SVG, no external dependencies.
+- **15 components organized by Atomic Design** (Brad Frost) - see the section below.
+
+## Structure: Atomic Design (atoms / molecules / organisms)
+
+```
+src/
+├── atoms/       Avatar, Badge, Button, Card, ProgressBar
+├── molecules/   SegmentedTabs, NavItem, StatTile, DecisionFactorRow,
+│                CompetitorRow, PriceRangeSlider, MiniMapCard
+└── organisms/   Sidebar, TopBar, ConfirmDialog
+```
+
+- **atoms/** - don't compose any other component in the library. The smallest building blocks: a button, a badge, an avatar circle.
+- **molecules/** - compose 1 or more atoms (`StatTile` uses `Badge` + `ProgressBar`; `CompetitorRow` uses `Avatar`), or are a self-contained control with its own interaction logic (`PriceRangeSlider`, `SegmentedTabs`).
+- **organisms/** - assemble a full screen section by combining molecules/atoms (`Sidebar` = `NavItem` × N + `Avatar`; `ConfirmDialog` = a complete modal with `Button`).
+
+`tokens/` and `icons/` are deliberately left out of this hierarchy - they aren't "components" in the Atomic Design sense (they have no visual composition of their own; they're the raw materials the atoms/molecules/organisms consume).
+
+**This doesn't contradict Fractal Component Design (FCD)**: each component still lives in its own self-contained file, with the same shape (props interface + responsibility comment + the component), regardless of which folder it's in - the only thing that changed is that folder now also documents its composition tier. See `../kairos-frontend/ARCHITECTURE.md` for the rest of the principles (SOLID, Clean Code) with examples.
+
+## Tests
+
+Each component has its test right next to it (`Badge.tsx` + `Badge.test.tsx` in the same folder) using [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/react). What actually matters about each one was tested: what it renders, which classes it applies based on its props/variants, and that callbacks (`onClick`, `onChange`, etc.) fire with the correct arguments - no giant snapshots, no testing internal implementation.
+
+```bash
+npm test        # runs all tests once
+npm run test:watch
+```
+
+## How a consuming project installs it
+
+Published to the public npm registry under the `moeve-ui` org:
+
+```bash
+npm install @moeve-ui/ui
+```
+
+```jsonc
+// package.json of the project that consumes it
+{
+  "dependencies": {
+    "@moeve-ui/ui": "^0.1.0"
+  }
+}
+```
+
+Its Tailwind preset is a separate entry point:
+
+```js
+// tailwind.config.js of the consuming project
+module.exports = {
+  presets: [require("@moeve-ui/ui/tailwind.preset")],
+  // ...
+};
+```
+
+### Local development against an unpublished change
+
+While iterating on a change here before publishing a new version, a consumer can still point at this folder instead of the registry:
+
+```jsonc
+{
+  "dependencies": {
+    "@moeve-ui/ui": "file:../kairos-ui"
+  }
+}
+```
+
+Run `npm run build` here first (the consumer picks up `dist/`, not `src/`), then `npm install` again on their side after each change.
+
+## Development
+
+```bash
+npm install       # installs devDependencies: React, TS, Tailwind, Vitest, Testing Library, tsup, Storybook
+npm run typecheck # tsc --noEmit
+npm test          # vitest run
+npm run build     # tsup -> dist/ (index + tailwind.preset, ESM + CJS + .d.ts)
+npm run storybook # visual playground on http://localhost:6006
+```
+
+## Publishing a new version
+
+```bash
+npm login                        # once per machine, needs to be a member of the moeve-ui org
+npm version patch                # or minor/major - bumps package.json + creates a git tag
+npm publish                      # runs prepublishOnly (typecheck + test + build) automatically
+```
+
+`publishConfig.access` is set to `"public"` in `package.json`, so the scoped package publishes as public (free on npm - a *private* scoped package needs a paid npm org plan). If that's not what you want, override it once with `npm publish --access restricted`.

package/dist/chunk-HUXDCAF5.mjs

@@ -0,0 +1,46 @@
+// src/tokens/colors.ts
+var colors = {
+  brand: {
+    sidebar: "#004656",
+    sidebarHover: "#005a6e",
+    accent: "#047dba",
+    primary: "#006395",
+    logo: "#8af9b5"
+  },
+  surface: {
+    page: "#f4fafe",
+    card: "#ffffff",
+    subtle: "#eef4f8",
+    muted: "#e9eff3"
+  },
+  text: {
+    primary: "#161c1f",
+    secondary: "#404850",
+    tertiary: "#707881",
+    onDark: "#ffffff",
+    onDarkMuted: "rgba(255,255,255,0.6)",
+    onDarkFaint: "rgba(255,255,255,0.5)"
+  },
+  success: {
+    DEFAULT: "#008851",
+    dark: "#006c3f",
+    bg: "#8af9b5"
+  },
+  danger: {
+    DEFAULT: "#ba1a1a",
+    dark: "#93000a",
+    bg: "#ffdad6"
+  },
+  info: {
+    DEFAULT: "#006395",
+    dark: "#2e6576"
+  },
+  border: {
+    DEFAULT: "#dde3e7"
+  }
+};
+
+export {
+  colors
+};
+//# sourceMappingURL=chunk-HUXDCAF5.mjs.map

package/dist/chunk-HUXDCAF5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/colors.ts"],"sourcesContent":["/**\n * Design tokens - extracted directly from the \"Redinamic-tec\" Figma file\n * (get_design_context on the \"Simulador de Impacto\" node), not made up.\n *\n * This is the ONLY source of truth for the library's colors. The Tailwind\n * preset (`packages/ui/tailwind.preset.ts`) reads from here, so a brand\n * change happens in a single place and propagates through the whole app -\n * it's the same Open/Closed principle: extend by adding/changing tokens,\n * not by editing every component that uses a color.\n */\n\nexport const colors = {\n  brand: {\n    sidebar: \"#004656\",\n    sidebarHover: \"#005a6e\",\n    accent: \"#047dba\",\n    primary: \"#006395\",\n    logo: \"#8af9b5\",\n  },\n  surface: {\n    page: \"#f4fafe\",\n    card: \"#ffffff\",\n    subtle: \"#eef4f8\",\n    muted: \"#e9eff3\",\n  },\n  text: {\n    primary: \"#161c1f\",\n    secondary: \"#404850\",\n    tertiary: \"#707881\",\n    onDark: \"#ffffff\",\n    onDarkMuted: \"rgba(255,255,255,0.6)\",\n    onDarkFaint: \"rgba(255,255,255,0.5)\",\n  },\n  success: {\n    DEFAULT: \"#008851\",\n    dark: \"#006c3f\",\n    bg: \"#8af9b5\",\n  },\n  danger: {\n    DEFAULT: \"#ba1a1a\",\n    dark: \"#93000a\",\n    bg: \"#ffdad6\",\n  },\n  info: {\n    DEFAULT: \"#006395\",\n    dark: \"#2e6576\",\n  },\n  border: {\n    DEFAULT: \"#dde3e7\",\n  },\n} as const;\n\nexport type ColorTokens = typeof colors;\n"],"mappings":";AAWO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,395 @@
+import * as react from 'react';
+import { SVGProps, ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+/**
+ * Design tokens - extracted directly from the "Redinamic-tec" Figma file
+ * (get_design_context on the "Simulador de Impacto" node), not made up.
+ *
+ * This is the ONLY source of truth for the library's colors. The Tailwind
+ * preset (`packages/ui/tailwind.preset.ts`) reads from here, so a brand
+ * change happens in a single place and propagates through the whole app -
+ * it's the same Open/Closed principle: extend by adding/changing tokens,
+ * not by editing every component that uses a color.
+ */
+declare const colors: {
+    readonly brand: {
+        readonly sidebar: "#004656";
+        readonly sidebarHover: "#005a6e";
+        readonly accent: "#047dba";
+        readonly primary: "#006395";
+        readonly logo: "#8af9b5";
+    };
+    readonly surface: {
+        readonly page: "#f4fafe";
+        readonly card: "#ffffff";
+        readonly subtle: "#eef4f8";
+        readonly muted: "#e9eff3";
+    };
+    readonly text: {
+        readonly primary: "#161c1f";
+        readonly secondary: "#404850";
+        readonly tertiary: "#707881";
+        readonly onDark: "#ffffff";
+        readonly onDarkMuted: "rgba(255,255,255,0.6)";
+        readonly onDarkFaint: "rgba(255,255,255,0.5)";
+    };
+    readonly success: {
+        readonly DEFAULT: "#008851";
+        readonly dark: "#006c3f";
+        readonly bg: "#8af9b5";
+    };
+    readonly danger: {
+        readonly DEFAULT: "#ba1a1a";
+        readonly dark: "#93000a";
+        readonly bg: "#ffdad6";
+    };
+    readonly info: {
+        readonly DEFAULT: "#006395";
+        readonly dark: "#2e6576";
+    };
+    readonly border: {
+        readonly DEFAULT: "#dde3e7";
+    };
+};
+type ColorTokens = typeof colors;
+
+/**
+ * Custom icon set, in plain SVG (no external library like
+ * lucide-react/heroicons) - so packages/ui doesn't depend on anything but
+ * React, and there's no separate icon package to install/update.
+ *
+ * NOTE ON DESIGN FIDELITY: the Figma design ships its own icons exported
+ * as images; those assets live on Figma's servers and the URLs expire in
+ * ~7 days, so they can't be "committed" as-is. These are an equivalent set
+ * (same visual meaning - pin, arrow, check, etc.) redrawn by hand in SVG,
+ * not an exact pixel-for-pixel copy of the original vector. If the exact
+ * Figma set is wanted later on, it can be exported as SVG from the file
+ * and used to replace these.
+ *
+ * All of them accept the standard SVG props (className, etc.) so size/color
+ * can be controlled with Tailwind from wherever they're used.
+ */
+type IconProps = SVGProps<SVGSVGElement>;
+declare function BoltIcon(props: IconProps): react.JSX.Element;
+declare function MapPinIcon(props: IconProps): react.JSX.Element;
+declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function ArrowUpIcon(props: IconProps): react.JSX.Element;
+declare function ArrowDownIcon(props: IconProps): react.JSX.Element;
+declare function RefreshIcon(props: IconProps): react.JSX.Element;
+declare function UserCircleIcon(props: IconProps): react.JSX.Element;
+declare function LogOutIcon(props: IconProps): react.JSX.Element;
+declare function TagIcon(props: IconProps): react.JSX.Element;
+declare function TargetIcon(props: IconProps): react.JSX.Element;
+declare function TrendUpIcon(props: IconProps): react.JSX.Element;
+declare function TrendDownIcon(props: IconProps): react.JSX.Element;
+declare function FuelIcon(props: IconProps): react.JSX.Element;
+declare function WalletIcon(props: IconProps): react.JSX.Element;
+declare function CheckCircleIcon(props: IconProps): react.JSX.Element;
+declare function XIcon(props: IconProps): react.JSX.Element;
+/**
+ * Solid/filled icon set, exported directly from the "Redinamic-tec" Figma
+ * file (the "Gestion de Precios" stat cards) - unlike the outline set
+ * above, these are pixel-accurate copies of the Figma vectors, not
+ * hand-redrawn equivalents. Each keeps its own natural viewBox/aspect
+ * ratio instead of being forced into the outline set's 24x24 grid.
+ */
+declare function FuelPumpSolidIcon(props: IconProps): react.JSX.Element;
+declare function WalletSolidIcon(props: IconProps): react.JSX.Element;
+declare function TrendUpSolidIcon(props: IconProps): react.JSX.Element;
+
+interface AvatarProps {
+    /** letter or icon shown inside the circle */
+    children: ReactNode;
+    /** background color of the circle (hex or another Tailwind class via className) */
+    className?: string;
+    size?: "sm" | "md";
+}
+/**
+ * Avatar/initials circle - used both by the session user (sidebar) and
+ * each competitor in the "Nearby Competitors" list. It does not decide
+ * the background OR text color: it receives them via className
+ * (e.g. "bg-danger-bg text-danger-dark" or "bg-success text-white"), so
+ * the same component works for any combination without having to touch it.
+ */
+declare function Avatar({ children, className, size }: AvatarProps): react.JSX.Element;
+
+type BadgeTone = "success" | "danger" | "neutral";
+interface BadgeProps {
+    children: ReactNode;
+    tone?: BadgeTone;
+    className?: string;
+}
+/**
+ * Small pill for deltas ("+0.7%", "-800L") and status labels. The set of
+ * variants ("tone") is the only extension point - adding a new tone
+ * doesn't touch the rest of the component (Open/Closed).
+ */
+declare function Badge({ children, tone, className }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = "primary" | "ghost" | "text";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    icon?: ReactNode;
+}
+/**
+ * Single button with 3 variants (the ones that appear in the design: the
+ * solid blue pill for "Aplicar precio"/"Actualizar datos", the text link
+ * for "Restablecer a Actual", and a "ghost" variant for future cases).
+ * Same as Badge: extending the set of variants doesn't require touching
+ * the rest of the component.
+ */
+declare function Button({ children, variant, icon, className, ...rest }: ButtonProps): react.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** removes the default padding, for when the content manages its own */
+    noPadding?: boolean;
+}
+/**
+ * Base white, rounded container with a soft shadow - the same pattern
+ * that wraps every dashboard block in the design (Simulator Panel,
+ * Decision Factors, Nearby Competitors, etc.). Anything specific to a
+ * given block goes through composition (children), not new props here -
+ * single responsibility principle: Card only knows how to be "the white box".
+ */
+declare function Card({ children, className, noPadding, ...rest }: CardProps): react.JSX.Element;
+
+interface ProgressBarProps {
+    /** 0 to 100 */
+    value: number;
+    /** color of the filled bar - Tailwind class, e.g. "bg-info" */
+    fillClassName?: string;
+    /** bar height in px (the design uses 4px in stat tiles and 6px in Decision Factors) */
+    heightClassName?: string;
+    /** number of equal segments the bar is divided into (the design uses 3 in "Supply Cost") */
+    segments?: number;
+    className?: string;
+}
+/**
+ * Simple progress bar. It knows nothing about "what" it represents
+ * (elasticity, margin, inventory...) - that's decided by whoever uses it
+ * via `value` and `fillClassName`. Keeping it "dumb" is what allows it to
+ * be reused in the stat tiles AND in the Decision Factors panel without
+ * duplicating code.
+ */
+declare function ProgressBar({ value, fillClassName, heightClassName, segments, className, }: ProgressBarProps): react.JSX.Element;
+
+type SnackbarTone = "success" | "danger" | "neutral";
+interface SnackbarProps {
+    message: string;
+    tone?: SnackbarTone;
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * Toast/confirmation bar (e.g. "Datos de mercado actualizados
+ * correctamente" after a refresh). Fully controlled - it has no timer
+ * or visibility state of its own; whoever uses it decides when it's on
+ * screen (mount/unmount it, or drive a boolean) and for how long, same
+ * philosophy as ConfirmDialog's `open`.
+ */
+declare function Snackbar({ message, tone, onClose, className }: SnackbarProps): react.JSX.Element;
+
+interface SegmentedTabOption {
+    value: string;
+    label: string;
+}
+interface SegmentedTabsProps {
+    options: SegmentedTabOption[];
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+/**
+ * The Simulator's "Regular | Premium | Diesel" control. It receives the
+ * options via props instead of having them fixed - the same component
+ * works for any list of tabs, in any future screen.
+ */
+declare function SegmentedTabs({ options, value, onChange, className }: SegmentedTabsProps): react.JSX.Element;
+
+interface NavItemProps {
+    icon: ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+}
+/**
+ * A sidebar navigation link. `active` is the only variant -
+ * the rest of the appearance (icon, text) is composed from outside.
+ */
+declare function NavItem({ icon, label, active, href }: NavItemProps): react.JSX.Element;
+
+interface StatTileProps {
+    icon: ReactNode;
+    label: string;
+    value: string;
+    /** unit suffix rendered next to `value` in a lighter/smaller style, e.g. "L" */
+    unit?: string;
+    /** delta badge text, e.g. "+2.4% vs prom. diario" */
+    delta?: string;
+    deltaTone?: BadgeTone;
+    /** optional 0-100 value for the mini bar below (not every tile has one) */
+    progressValue?: number;
+    progressClassName?: string;
+}
+/**
+ * One of the result cards ("Volumen Proyectado", "Margen Bruto Proy.",
+ * "Ganancia Proyectada"). Purely presentational - it doesn't know where
+ * the numbers come from, it just renders them (Dependency Inversion:
+ * StatTile depends on props, not on the API or the model).
+ */
+declare function StatTile({ icon, label, value, unit, delta, deltaTone, progressValue, progressClassName, }: StatTileProps): react.JSX.Element;
+
+interface DecisionFactorRowProps {
+    label: string;
+    /** the short value on the right, e.g. "Alta", "Estable", "65%" */
+    statusText: string;
+    statusClassName?: string;
+    /** 0-100, the weight/strength of this factor */
+    value: number;
+    fillClassName?: string;
+    segments?: number;
+    description: string;
+}
+/**
+ * A row in the "Decision Factors" panel (Elasticity, Supply Cost,
+ * Inventory...). Designed to be populated directly from the `factors`
+ * array returned by the backend's POST /predict - each factor from the
+ * API maps 1 to 1 to one of these rows.
+ */
+declare function DecisionFactorRow({ label, statusText, statusClassName, value, fillClassName, segments, description, }: DecisionFactorRowProps): react.JSX.Element;
+
+type CompetitorTrend = "up" | "down" | "stable";
+interface CompetitorRowProps {
+    name: string;
+    /** initial shown in the avatar, e.g. "O" */
+    avatarLetter: string;
+    avatarBgClassName: string;
+    avatarTextClassName: string;
+    distanceKm: number;
+    price: string;
+    trend: CompetitorTrend;
+    /** e.g. "Hace 2h" or "Sin cambios (24h)" */
+    trendLabel: string;
+}
+/**
+ * A row in the "Nearby Competitors" panel. Designed to be populated
+ * directly from the array returned by the backend's GET /competitors.
+ */
+declare function CompetitorRow({ name, avatarLetter, avatarBgClassName, avatarTextClassName, distanceKm, price, trend, trendLabel, }: CompetitorRowProps): react.JSX.Element;
+
+interface PriceRangeSliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    /** the value the user is currently dragging */
+    value: number;
+    onChange: (value: number) => void;
+    /** reference "current" price, shown at the top left */
+    currentPrice: number;
+    /** price suggested by the model, shown at the top right */
+    recommendedPrice: number;
+    currencyFormatter: (value: number) => string;
+}
+/**
+ * The Simulator's "Adjust the price to evaluate the projected impact"
+ * slider. Fully controlled (value/onChange come from the parent) - it
+ * holds no state of its own, so it doesn't need "use client" by itself:
+ * it inherits it from the screen component that does manage the state.
+ */
+declare function PriceRangeSlider({ min, max, step, value, onChange, currentPrice, recommendedPrice, currencyFormatter, }: PriceRangeSliderProps): react.JSX.Element;
+
+interface MiniMapCardProps {
+    overlayTitle: string;
+    /** text already assembled with the count included, e.g. "Basado en 3 competidores clave" - don't repeat it in competitorCount. */
+    overlayLinkLabel: string;
+    /** used only for accessibility (aria-label), not rendered on screen again - overlayLinkLabel already has the number in the right place in the sentence. */
+    competitorCount: number;
+}
+/**
+ * The decorative map card below "Decision Factors".
+ *
+ * *** PLACEHOLDER ***: the design uses a screenshot of a real map; here an
+ * abstract SVG map is drawn instead (no dependencies or API key) that
+ * occupies the same space and keeps the text overlay identical. Once a
+ * real integration (Google Maps / Mapbox) exists with the location and
+ * geolocated competitors, this is the component that gets replaced -
+ * the rest of the screen doesn't change because it only depends on this
+ * interface.
+ */
+declare function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }: MiniMapCardProps): react.JSX.Element;
+
+interface SidebarStation {
+    id: string;
+    label: string;
+}
+interface SidebarNavItem {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    href?: string;
+}
+interface SidebarUser {
+    name: string;
+    role: string;
+}
+interface SidebarProps {
+    brandName?: string;
+    stations: SidebarStation[];
+    selectedStationId: string;
+    onSelectStation: (stationId: string) => void;
+    navItems: SidebarNavItem[];
+    user: SidebarUser;
+    onLogout?: () => void;
+}
+/**
+ * The fixed 260px sidebar. It receives EVERYTHING via props - stations,
+ * nav items, user - instead of having anything hardcoded (beyond the
+ * default brand name). This is what lets it serve "multiple users":
+ * whoever uses it decides which user/stations to show, this component
+ * just knows how to render them. The station list currently uses a
+ * native <select> instead of a custom dropdown - it's the simplest and
+ * most accessible option; it can be replaced by a more elaborate menu
+ * without touching the rest of the screen.
+ */
+declare function Sidebar({ brandName, stations, selectedStationId, onSelectStation, navItems, user, onLogout, }: SidebarProps): react.JSX.Element;
+
+interface TopBarProps {
+    stationName: string;
+    lastUpdatedLabel: string;
+    onRefresh?: () => void;
+    refreshing?: boolean;
+    /** optional content rendered between the station info and the refresh button - e.g. product tabs. */
+    middleContent?: ReactNode;
+}
+/**
+ * The fixed top bar (80px, with blur), to the right of the sidebar.
+ * It only knows the active station's name and the "last updated"
+ * state - the concrete data comes from the screen that uses it.
+ */
+declare function TopBar({ stationName, lastUpdatedLabel, onRefresh, refreshing, middleContent, }: TopBarProps): react.JSX.Element;
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    productLabel: string;
+    description: ReactNode;
+    currentPrice: string;
+    newPrice: string;
+    marginImpactLabel: string;
+    volumeImpactLabel: string;
+    confirming?: boolean;
+}
+/**
+ * The "Aplicar precio recomendado" / "Confirmar y aplicar" modal. Fully
+ * controlled by `open` - it has no state of its own, so the screen that
+ * uses it decides when to show it (e.g. after a successful /simulate
+ * response) and what happens on confirm (calling /prices/apply).
+ */
+declare function ConfirmDialog({ open, onClose, onConfirm, title, productLabel, description, currentPrice, newPrice, marginImpactLabel, volumeImpactLabel, confirming, }: ConfirmDialogProps): react.JSX.Element | null;
+
+export { ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BoltIcon, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, CheckCircleIcon, ChevronDownIcon, type ColorTokens, CompetitorRow, type CompetitorRowProps, type CompetitorTrend, ConfirmDialog, type ConfirmDialogProps, DecisionFactorRow, type DecisionFactorRowProps, FuelIcon, FuelPumpSolidIcon, LogOutIcon, MapPinIcon, MiniMapCard, type MiniMapCardProps, NavItem, type NavItemProps, PriceRangeSlider, type PriceRangeSliderProps, ProgressBar, type ProgressBarProps, RefreshIcon, type SegmentedTabOption, SegmentedTabs, type SegmentedTabsProps, Sidebar, type SidebarNavItem, type SidebarProps, type SidebarStation, type SidebarUser, Snackbar, type SnackbarProps, type SnackbarTone, StatTile, type StatTileProps, TagIcon, TargetIcon, TopBar, type TopBarProps, TrendDownIcon, TrendUpIcon, TrendUpSolidIcon, UserCircleIcon, WalletIcon, WalletSolidIcon, XIcon, colors };