forlogic-core 3.0.10 → 4.0.0

package/dist/components/insights/insight-motion.d.ts

@@ -0,0 +1,222 @@
+/**
+ * @module InsightMotion
+ * Camada canônica de movimento, hover e nitidez dos Insight Charts.
+ *
+ * Tudo que anima ou responde ao ponteiro em um gráfico do Design System passa
+ * por aqui: mesma curva de easing (orgânica), mesmos raios de canto, mesma
+ * bolha de tooltip e o mesmo tratamento de pixel (sem meio-pixel, sem blur).
+ */
+import * as React from 'react';
+/** Curva orgânica única (ease-out expressivo) de todos os charts. */
+export declare const EASE = "cubic-bezier(0.22, 0.61, 0.36, 1)";
+/** Durações padrão (ms). */
+export declare const DUR: {
+    readonly enter: 720;
+    readonly hover: 180;
+    readonly morph: 480;
+};
+/** Transição base de qualquer geometria de chart. */
+export declare const chartTransition: (props?: string) => string;
+/** Classe utilitária de transição suave (respeita `prefers-reduced-motion`). */
+export declare const MOTION = "motion-reduce:!transition-none motion-reduce:!animation-none";
+/**
+ * Raios canônicos dos elementos de chart (px). Barras verticais e horizontais
+ * compartilham o mesmo raio; trilhos e pílulas usam raio total.
+ */
+export declare const R: {
+    /** Barras, colunas e segmentos. */
+    readonly bar: 6;
+    /** Segmento interno de pilha (mantém a leitura de bloco). */
+    readonly segment: 3;
+    /** Células de matriz/heatmap. */
+    readonly cell: 4;
+    /** Trilhos, pílulas e medidores. */
+    readonly pill: 9999;
+};
+/**
+ * Sombreamento canônico das geometrias de dado (mesma escala do DS:
+ * `shadows.xs`/`shadows.sm`, mas derivada do token de tema `--foreground`,
+ * para funcionar em tema claro e escuro).
+ */
+export declare const SHADOW: {
+    /** Trilho / fundo de barra: profundidade interna sutil. */
+    readonly track: "inset 0 1px 2px 0 hsl(var(--foreground) / 0.06)";
+    /** Barra de dado (coluna, linha, ranking, floating). */
+    readonly bar: "0 1px 2px 0 hsl(var(--foreground) / 0.10), 0 1px 3px -1px hsl(var(--foreground) / 0.06)";
+    /** Segmento interno de pilha — mais leve, para não somar sombras. */
+    readonly segment: "0 1px 1px 0 hsl(var(--foreground) / 0.06)";
+    /** Célula de matriz/heatmap. */
+    readonly cell: "0 1px 1px 0 hsl(var(--foreground) / 0.05)";
+};
+/** Raio de topo para colunas (base reta assentada no eixo). */
+export declare const topRadius: (r?: number) => string;
+/**
+ * Raios em classe utilitária — mesma escala do `R`, para superfícies HTML
+ * (cards de dados, tooltips, chips, header). Único sistema em todo o chart.
+ */
+export declare const RC: {
+    /** Superfície do card de dado / tile interno. */
+    readonly tile: "rounded-lg";
+    /** Chips, badges e controles compactos (fases, unidades). */
+    readonly chip: "rounded-md";
+    /** Bolha de tooltip. */
+    readonly tip: "rounded-lg";
+    /** Amostras de legenda quadradas e segmentos. */
+    readonly segment: "rounded-[3px]";
+    /** Células de matriz/heatmap. */
+    readonly cell: "rounded-[4px]";
+    /** Trilhos, pílulas, dots e medidores. */
+    readonly pill: "rounded-full";
+};
+/**
+ * Espaçamento canônico dos infográficos — um único ritmo (4/8/12/16px) para
+ * shell, header, tiles e tooltip.
+ */
+export declare const SPACE: {
+    /** Padding da superfície do card. */
+    readonly card: "p-4";
+    /** Empilhamento vertical do card (header → valor → chart → rodapé). */
+    readonly stack: "gap-4";
+    /** Padding de tile/card de dado interno. */
+    readonly tile: "p-2.5";
+    /** Padding do tooltip. */
+    readonly tip: "px-2.5 py-1.5";
+    /** Gap entre elementos de uma mesma linha (header, legenda, controles). */
+    readonly row: "gap-2";
+    /** Gap do header (texto ↔ ações). */
+    readonly header: "gap-3";
+};
+/**
+ * Tipografia canônica dos infográficos — **uma só escala** para eixos,
+ * legendas, captions e valores auxiliares, herdando a fonte do DS (Inter).
+ */
+export declare const TYPO: {
+    /** Tamanho (px) de rótulo de eixo e legenda. */
+    readonly size: 11;
+    /** Peso de rótulo de eixo e legenda. */
+    readonly weight: 500;
+    /** Cor canônica de texto auxiliar dos charts. */
+    readonly color: "hsl(var(--muted-foreground))";
+};
+/** Classes canônicas de texto auxiliar dos charts (HTML/CSS). */
+export declare const TXT: {
+    /** Rótulo de eixo (categorias, datas, escala). */
+    readonly axis: "text-[11px] font-medium leading-none tabular-nums text-muted-foreground";
+    /** Item de legenda. */
+    readonly legend: "text-[11px] font-medium leading-none text-muted-foreground";
+    /** Caption/descrição auxiliar sob o gráfico. */
+    readonly caption: "text-[11px] leading-snug text-muted-foreground";
+    /** Valor auxiliar (totais, percentuais ao lado da geometria). */
+    readonly value: "text-[11px] font-semibold leading-none tabular-nums";
+};
+/** Props de `tick` canônicas para eixos Recharts (SVG). */
+export declare const AXIS_TICK: {
+    readonly fontSize: 11;
+    readonly fontWeight: 500;
+    readonly fill: "hsl(var(--muted-foreground))";
+    readonly fontFamily: "inherit";
+};
+/** Alturas canônicas de área de plotagem (px). */
+export declare const CHART_H: {
+    readonly xs: 120;
+    readonly sm: 150;
+    readonly md: 170;
+    readonly lg: 200;
+    readonly xl: 240;
+};
+/**
+ * Altura mínima canônica do card de infográfico (px) por densidade — garante
+ * que todos os charts do catálogo ocupem o mesmo bloco, variando só o conteúdo.
+ */
+export declare const CARD_MIN: {
+    readonly dense: 232;
+    readonly compact: 268;
+    readonly comfortable: 300;
+};
+/** Faixas de densidade do container do card. */
+export type ChartDensity = 'dense' | 'compact' | 'comfortable';
+/** Classifica a largura do container em faixas de densidade. */
+export declare const densityOf: (width: number) => ChartDensity;
+/** Observa a largura real do elemento (responsividade por container, não por viewport). */
+export declare function useElementWidth<T extends HTMLElement>(): {
+    readonly ref: React.RefObject<T>;
+    readonly width: number;
+    readonly density: ChartDensity;
+};
+/** Altura efetiva do gráfico conforme a densidade do container (nunca trunca). */
+export declare const fitHeight: (base: number, density: ChartDensity) => number;
+/**
+ * Alinha um valor à grade de pixels do dispositivo — evita bordas cinzas e
+ * traços "grossos" em telas 1x.
+ */
+export declare const snap: (value: number) => number;
+/** Props de nitidez para SVG (preenchimentos e traços). */
+export declare const CRISP: {
+    readonly shapeRendering: "geometricPrecision";
+    readonly vectorEffect: "non-scaling-stroke";
+};
+/** Props de nitidez para retângulos/células (bordas exatas). */
+export declare const CRISP_EDGE: {
+    readonly shapeRendering: "crispEdges";
+};
+/**
+ * Anima a entrada de qualquer geometria: retorna `false` no primeiro frame e
+ * `true` em seguida, permitindo transicionar de 0 até o valor real.
+ */
+export declare function useChartReveal(delay?: number): boolean;
+/** Atraso em cascata por índice (entrada orgânica, item após item). */
+export declare const stagger: (index: number, step?: number, max?: number) => string;
+/**
+ * Linha canônica de tooltip: **valor · percentual · série · fase · data**.
+ * Todos os charts do DS usam exatamente esta ordem, em uma única linha.
+ */
+export interface ChartTipRow {
+    /** Nome da série (ex.: "Concluídos"). Também aceito via `label` (legado). */
+    series?: React.ReactNode;
+    /** @deprecated use `series`. */
+    label?: React.ReactNode;
+    /** Valor absoluto do ponto. */
+    value?: React.ReactNode;
+    /** Percentual explícito (0–100). Se ausente, é derivado de `total`. */
+    percent?: number;
+    /** Fase/estado do ponto (ex.: "Execução"). */
+    phase?: React.ReactNode;
+    /** Data/período do ponto (ex.: "mar/25"). */
+    date?: React.ReactNode;
+    color?: string;
+}
+export interface ChartTipContent {
+    title?: React.ReactNode;
+    rows: ChartTipRow[];
+    /** Base para o percentual das linhas que não trazem `percent`. */
+    total?: number;
+    /** Fase padrão aplicada a todas as linhas. */
+    phase?: React.ReactNode;
+    /** Data padrão aplicada a todas as linhas (default: `title`). */
+    date?: React.ReactNode;
+}
+/** Bolha de tooltip canônica (mesma anatomia em SVG, CSS e Recharts). */
+export declare function ChartTipBubble({ title, rows, unit, total, phase, date, className, }: ChartTipContent & {
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Tooltip de hover para gráficos desenhados em CSS/SVG puro (barras, heatmap,
+ * sparkline). Segue o ponteiro dentro do container, com clamp nas bordas.
+ */
+export declare function useChartTip(): {
+    ref: React.RefObject<HTMLDivElement>;
+    bind: (content: ChartTipContent) => {
+        onMouseEnter: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+        onFocus: (e: React.FocusEvent) => void;
+        onBlur: () => void;
+        tabIndex: number;
+    };
+    node: React.JSX.Element;
+    hide: () => void;
+    active: boolean;
+};
+/** Container relativo padrão para gráficos com tooltip próprio. */
+export declare const TIP_HOST = "relative w-full min-w-0 [transform:translateZ(0)]";

package/dist/components/insights/insight-phases.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module InsightPhases
+ * Hierarquia de estados e fases dos infográficos de composição de fluxo.
+ *
+ * Uma **fase** agrupa **estados**. Cada fase pode ser colapsada (uma série
+ * agregada) ou expandida (uma série por estado). A fase ativa usa o tom do
+ * tema; as demais usam a escada de cinzas (ver `phaseColors`).
+ */
+import * as React from 'react';
+import type { InsightPoint, InsightSeries } from './insight-primitives';
+/** Estado (sub-nível) de uma fase. */
+export interface InsightState {
+    key: string;
+    label: string;
+}
+/** Fase do fluxo, com seus estados internos. */
+export interface InsightPhase {
+    /** Chave da fase nos dados (`InsightPoint[key]`). */
+    key: string;
+    label: string;
+    /** Estados que compõem a fase. Sem estados, a fase não expande. */
+    states?: InsightState[];
+}
+/** Fases padrão de um fluxo de trabalho (backlog → execução → conclusão). */
+export declare const DEFAULT_PHASES: InsightPhase[];
+/** Resultado da resolução de fases: séries e dados prontos para a primitiva. */
+export interface PhaseResolution {
+    series: InsightSeries[];
+    data: InsightPoint[];
+    expanded: Record<string, boolean>;
+    toggle: (key: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    phases: InsightPhase[];
+}
+/**
+ * Deriva séries/dados a partir das fases e do estado de expansão. Fases
+ * colapsadas viram uma série; expandidas viram uma série por estado, com o
+ * total da fase distribuído entre os estados.
+ */
+export declare function usePhaseHierarchy(phases: InsightPhase[], data: InsightPoint[], { activeIndex }?: {
+    activeIndex?: number;
+}): PhaseResolution;
+/** Botões de expandir/colapsar por fase (hierarquia estados > fases). */
+export declare function PhaseControls({ phases, expanded, onToggle, onExpandAll, onCollapseAll, className, }: {
+    phases: InsightPhase[];
+    expanded: Record<string, boolean>;
+    onToggle: (key: string) => void;
+    onExpandAll?: () => void;
+    onCollapseAll?: () => void;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/insights/insight-primitives.d.ts

@@ -0,0 +1,289 @@
+/**
+ * @module InsightPrimitives
+ * Primitivas de gráfico dos infográficos (Insight Charts).
+ *
+ * Todas são responsivas (largura fluida + altura configurável), dinâmicas
+ * (dados via props) e temáticas: as cores vêm sempre da escada derivada do tom
+ * ativo do card (`--insight-tone`) ou de tokens do tema.
+ *
+ * Padrão único de comportamento (ver `insight-motion`):
+ * - entrada animada com a mesma curva orgânica e cascata por índice;
+ * - hover/foco com realce e tooltip na mesma bolha, em CSS, SVG ou Recharts;
+ * - raios de canto vindos do token `R`;
+ * - geometria alinhada ao pixel (`snap`) e SVG com `shapeRendering` explícito.
+ */
+import * as React from 'react';
+export { TXT as INSIGHT_TEXT, TYPO as INSIGHT_TYPO, AXIS_TICK as INSIGHT_AXIS_TICK, ChartTipBubble, R as INSIGHT_RADIUS, SHADOW as INSIGHT_SHADOW, EASE as INSIGHT_EASE, useChartReveal, useChartTip, } from './insight-motion';
+/** Tooltip padrão dos infográficos (mesma anatomia do StatCard). */
+export declare function InsightTooltip({ active, payload, label, unit, }: {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: number | string;
+        color?: string;
+        payload?: Record<string, unknown>;
+    }>;
+    label?: string | number;
+    unit?: string;
+}): React.JSX.Element;
+/**
+ * Degradê vertical padrão de toda área preenchida do catálogo.
+ *
+ * Quatro paradas com queda progressiva até transparente: elimina o "corte"
+ * grosseiro do fim do preenchimento e mantém o mesmo peso visual em claro/escuro.
+ */
+export declare function AreaFill({ id, color, top }: {
+    id: string;
+    color: string;
+    top?: number;
+}): React.JSX.Element;
+/**
+ * Caminho suave (Catmull-Rom → Bézier cúbica).
+ *
+ * Usado nas sparklines SVG: substitui os segmentos retos por curva contínua,
+ * dando a leitura orgânica das linhas Recharts (`type="monotone"`).
+ */
+export declare function smoothPath(pts: Array<{
+    x: number;
+    y: number;
+}>, tension?: number): string;
+/** Ponto genérico das séries. */
+export interface InsightPoint {
+    label: string;
+    [key: string]: string | number;
+}
+/** Série nomeada. */
+export interface InsightSeries {
+    key: string;
+    label: string;
+    /** Sobrescreve a cor derivada do tom. */
+    color?: string;
+}
+/** Barras verticais sobre trilho (bullet). Valor relativo ao máximo da série. */
+export declare function TrackBars({ data, height: heightProp, max, showLabels, highlight, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    max?: number;
+    showLabels?: boolean;
+    /** Índice destacado (usa o tom cheio; os demais ficam suaves). */
+    highlight?: number;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Barras empilhadas (2+ séries) com cantos arredondados. */
+export declare function StackedBars({ data, series, height: heightProp, showLabels, rounded, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    showLabels?: boolean;
+    rounded?: 'full' | 'md';
+    className?: string;
+}): React.JSX.Element;
+/** Barras agrupadas lado a lado (comparação de períodos). */
+export declare function GroupedBars({ data, series, height: heightProp, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    className?: string;
+}): React.JSX.Element;
+/** Barras flutuantes (faixa de mínimo/máximo por período). */
+export declare function FloatingBars({ data, height: heightProp, ticks, unit, className, }: {
+    data: Array<{
+        label: string;
+        from: number;
+        to: number;
+    }>;
+    height?: number;
+    ticks?: number;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Colunas segmentadas (cada coluna divide o total em segmentos por série). */
+export declare function BulletStack({ data, series, height: heightProp, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    className?: string;
+}): React.JSX.Element;
+/** Barras com linha de referência (MAX) e um período em destaque. */
+export declare function BarsWithMax({ data, height: heightProp, highlight, maxLabel, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    highlight?: number;
+    maxLabel?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Ranking horizontal (largura proporcional + escada de tons). */
+export declare function RankingBars({ data, className, showValue, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    className?: string;
+    showValue?: boolean;
+}): React.JSX.Element;
+/** Pares horizontais: progresso sobre trilho, uma linha por item. */
+export declare function HorizontalBarPairs({ data, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        total: number;
+    }>;
+    className?: string;
+}): React.JSX.Element;
+/** Heatmap de contribuições (grade semanal). */
+export declare function ContributionHeatmap({ weeks, rows, values, columnLabels, className, }: {
+    weeks?: number;
+    rows?: number;
+    /** Valores de 0 a 4 (intensidade). Gerados de forma estável quando ausentes. */
+    values?: number[][];
+    columnLabels?: string[];
+    className?: string;
+}): React.JSX.Element;
+/** Escala "Menos → Mais" do heatmap. */
+export declare function HeatmapScale({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** Linha suavizada com eixos, pontos e grade vertical. */
+export declare function Spline({ data, height: heightProp, orientation, dots, unit, yUnit, dashed, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    /** `vertical` inverte os eixos (curva em S, estilo altitude). */
+    orientation?: 'horizontal' | 'vertical';
+    dots?: boolean;
+    unit?: string;
+    yUnit?: string;
+    dashed?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Área com gradiente (sparkline expressiva). */
+export declare function AreaSpark({ data, height: heightProp, axis, dots, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    axis?: boolean;
+    dots?: boolean;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Duas ou mais linhas comparadas, com halo opcional (banda de dispersão). */
+export declare function MultiLine({ data, series, height: heightProp, axis, halo, unit, yUnit, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    axis?: boolean;
+    halo?: boolean;
+    unit?: string;
+    yUnit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Áreas empilhadas (composição por categoria ao longo do tempo). */
+export declare function StackedArea({ data, series, height: heightProp, axis, mirrored, unit, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    axis?: boolean;
+    /** Espelha o gráfico (fluxo/intensidade). */
+    mirrored?: boolean;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Linha com faixa de variação (mín/máx) ao fundo. */
+export declare function RangeAreaLine({ data, height: heightProp, yUnit, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        min: number;
+        max: number;
+    }>;
+    height?: number;
+    yUnit?: string;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Sparkline compacta para cabeçalhos, células e rodapés.
+ *
+ * Traço desenhado progressivamente na entrada, guide dots alinhados a cada
+ * ponto e tooltip na bolha canônica ao passar o ponteiro.
+ */
+export declare function MiniSparkline({ data, width, height: heightProp, tone, dots, interactive, labels, unit, className, }: {
+    data: number[];
+    width?: number;
+    height?: number;
+    tone?: string;
+    /** Exibe os guide dots em cada ponto da série. */
+    dots?: boolean;
+    /** Hover com tooltip. Default: `true`. */
+    interactive?: boolean;
+    /** Rótulos opcionais por ponto (eixo x do tooltip). */
+    labels?: string[];
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Donut de progresso com rótulo central. */
+export declare function DonutGauge({ value, total, size, thickness, label, caption, segments, className, }: {
+    value: number;
+    total?: number;
+    size?: number;
+    thickness?: number;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    /** Divide o anel em segmentos categóricos (soma = value). */
+    segments?: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    className?: string;
+}): React.JSX.Element;
+/** Anéis concêntricos (comparação de múltiplas séries em progresso). */
+export declare function ConcentricRings({ data, size, thickness, gap, label, caption, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        total?: number;
+        color?: string;
+    }>;
+    size?: number;
+    thickness?: number;
+    gap?: number;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Pizza categórica (participação). */
+export declare function SharePie({ data, height: heightProp, donut, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    height?: number;
+    donut?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Barra de progresso rotulada (uso/limite) com marcador MAX. */
+export declare function ProgressMeter({ value, total, caption, maxLabel, className, }: {
+    value: number;
+    total?: number;
+    caption?: React.ReactNode;
+    maxLabel?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Pontos de intensidade (escada de tons) usada em rodapés. */
+export declare function IntensityDots({ steps, className }: {
+    steps?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/insights/insight-tokens.d.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties } from 'react';
+/**
+ * @module InsightTokens
+ * Paleta e helpers de cor dos infográficos (Insight Charts).
+ *
+ * Regra canônica: **nenhuma cor fixa**. Toda a escada de séries é derivada dos
+ * tokens do tema ativo (`--primary`, `--card`, `--control-*`) via `color-mix`,
+ * garantindo que o mesmo chart funcione em todos os temas e nos modos claro/escuro.
+ */
+/** Tons semânticos suportados pelos infográficos (mesma família do StatCard). */
+export type InsightTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+/** Variável CSS base de cada tom. */
+export declare const INSIGHT_TONE_VAR: Record<InsightTone, string>;
+/** Cor do tom ativo do card (usa a variável local `--insight-tone`). */
+export declare const TONE = "hsl(var(--insight-tone))";
+/** Cor do tom ativo com alpha. */
+export declare const toneAlpha: (a: number) => string;
+/**
+ * Escada de série derivada do tom ativo: 0 = mais saturado/escuro,
+ * 1 = mais claro (misturado com a superfície do card).
+ */
+export declare const toneStep: (step: number) => string;
+/**
+ * Paleta **monocromática** única de TODOS os charts.
+ *
+ * Regra: nenhuma cor semântica (verde/amarelo/vermelho) é usada para
+ * discriminar categorias. A escada parte do tom do tema (marca) e **desce até
+ * o cinza** do tema, seguindo a proporção visual 60/30/10:
+ * 60% do peso na marca (índices 0–1), 30% em tons intermediários (2–3),
+ * 10% em cinzas residuais (4–5).
+ */
+export declare const CHART_PALETTE: string[];
+/** Cor da n-ésima série na paleta única (cicla depois de 6). */
+export declare const paletteColor: (index: number) => string;
+/**
+ * Sequência monocromática para `count` séries: distribui a escada
+ * marca → cinza de forma proporcional, mantendo o contraste entre vizinhos
+ * mesmo quando há mais séries do que passos na paleta.
+ */
+export declare const seriesColors: (count: number) => string[];
+/**
+ * Passo contínuo da escada monocromática: `0` = marca profunda,
+ * `5` = cinza claro. Usado quando há mais séries do que passos discretos.
+ */
+export declare const monoStep: (step: number) => string;
+/**
+ * Escada neutra do tema (cinzas) usada para discriminar **estados e fases**:
+ * 0 = cinza mais forte (fase concluída/atual em leitura neutra),
+ * 4 = quase superfície (fase futura/inativa).
+ */
+export declare const grayStep: (step: number) => string;
+/**
+ * Cores de fases: a fase ativa (e as anteriores, quando `cumulative`) usa a
+ * escada do tom; as demais caem nos cinzas do tema — mesmo padrão dos prints
+ * de referência, onde o gráfico separa fases por tom vs. cinza.
+ */
+export declare const phaseColors: (count: number, activeIndex?: number, { cumulative }?: {
+    cumulative?: boolean;
+}) => string[];
+/** Cor do trilho/fundo das barras e anéis. */
+export declare const TRACK = "color-mix(in oklab, hsl(var(--muted)) 88%, hsl(var(--card)) 12%)";
+/** Cor das linhas de grade. */
+export declare const GRID = "hsl(var(--surface-border))";
+/** Estilo inline que injeta o tom ativo no card. */
+export declare const insightToneStyle: (tone?: InsightTone) => CSSProperties;
+/** Formata número no padrão pt-BR. */
+export declare const fmt: (value: number, digits?: number) => string;
+/** Formata variação percentual com sinal. */
+export declare const fmtDelta: (delta: number) => string;
+/** Abrevia números grandes (1.2K, 3,4M). */
+export declare const fmtCompact: (value: number) => string;