forlogic-core 3.0.10 → 4.0.0

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

@@ -0,0 +1,153 @@
+/**
+ * @module InsightVariants
+ * As 35 variantes canônicas de infográfico (Insight Charts) do Design System.
+ *
+ * Cada variante é um **componente reutilizável**: recebe dados por prop, cai em
+ * um conjunto de dados de demonstração quando nada é passado e compõe sempre
+ * `InsightCard` (shell) + uma primitiva de gráfico. Nenhuma cor fixa — tudo é
+ * derivado do tom ativo do tema (ver `insight-tokens`).
+ */
+import * as React from 'react';
+import { type InsightPoint, type InsightSeries } from './insight-primitives';
+import { type InsightTone } from './insight-tokens';
+import { type InsightPhase } from './insight-phases';
+/** Ponto simples de série (rótulo + valor) usado pela maioria das variantes. */
+export interface InsightDatum {
+    label: string;
+    value: number;
+}
+/** Props comuns a todas as variantes de infográfico. */
+export interface InsightChartProps {
+    /** Título do card. */
+    title?: React.ReactNode;
+    /** Linha de apoio acima do título. */
+    kicker?: React.ReactNode;
+    /** Descrição curta. */
+    description?: React.ReactNode;
+    /** Tom semântico (brand, success, warning, danger, neutral). */
+    tone?: InsightTone;
+    /** Série principal. Quando ausente, usa os dados de demonstração. */
+    data?: InsightDatum[];
+    /** Valor destacado. Quando ausente, é calculado a partir da série. */
+    value?: React.ReactNode;
+    /** Unidade do valor. */
+    unit?: string;
+    /** Variação percentual. */
+    delta?: number;
+    /** Texto de comparação do delta. */
+    comparison?: React.ReactNode;
+    /** Rodapé livre do card. */
+    footer?: React.ReactNode;
+    /** Altura útil do gráfico. */
+    height?: number;
+    className?: string;
+}
+/** Props das variantes com mais de uma série. */
+export interface InsightMultiChartProps extends Omit<InsightChartProps, 'data'> {
+    /** Pontos com uma chave por série. */
+    data?: InsightPoint[];
+    /** Definição das séries exibidas. */
+    series?: InsightSeries[];
+}
+/** Props das variantes de composição de fluxo (hierarquia estados > fases). */
+export interface InsightPhaseChartProps extends Omit<InsightChartProps, 'data'> {
+    /** Pontos com uma chave por fase. */
+    data?: InsightPoint[];
+    /** Fases do fluxo e seus estados internos. */
+    phases?: InsightPhase[];
+}
+/** 01 · Barras sobre trilho, com o período mais recente em destaque. */
+export declare function ChartTrackBars({ title, data, value, unit, delta, comparison, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 02 · Barras com linha de referência no pico da série. */
+export declare function ChartBarsWithMax({ title, data, value, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 03 · Barras empilhadas por composição de status. */
+export declare function ChartStackedBars({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 04 · Barras agrupadas comparando dois períodos. */
+export declare function ChartGroupedBars({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 05 · Barras flutuantes com faixa de mínimo e máximo. */
+export declare function ChartFloatingBars({ title, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 06 · Colunas segmentadas (cada coluna divide o total por série). */
+export declare function ChartBulletColumns({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 07 · Ranking horizontal com valor à direita. */
+export declare function ChartRankingBars({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 08 · Barras horizontais com meta (valor sobre total). */
+export declare function ChartBarPairs({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 09 · Barras com total consolidado no cabeçalho. */
+export declare function ChartTotalBars({ title, data, unit, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 10 · Barras compactas com sparkline de apoio. */
+export declare function ChartBarsWithSparkline({ title, data, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 11 · Linha suavizada com eixos e pontos. */
+export declare function ChartSpline({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 12 · Linha tracejada (projeção / cenário previsto). */
+export declare function ChartProjectionSpline({ title, data, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 13 · Curva vertical (perfil em S, estilo altitude). */
+export declare function ChartVerticalSpline({ title, data, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 14 · Área simples (sparkline preenchido, sem eixos). */
+export declare function ChartAreaSpark({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 15 · Área com eixos e pontos marcados. */
+export declare function ChartAreaAxis({ title, data, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 16 · Duas linhas comparando séries. */
+export declare function ChartMultiLine({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 17 · Linhas com halo (destaque do ponto mais recente). */
+export declare function ChartHaloLines({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 18 · Áreas empilhadas (composição ao longo do tempo). */
+export declare function ChartStackedArea({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 19 · Área espelhada (fluxo/intensidade). */
+export declare function ChartMirroredFlow({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 20 · Linha com banda de confiança (mín./máx.). */
+export declare function ChartRangeBand({ title, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 21 · Área dupla com filtro segmentado (estilo "população estimada"). */
+export declare function ChartSegmentedArea({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 22 · Grade de sparklines (vários indicadores lado a lado). */
+export declare function ChartSparklineTiles({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 23 · Linha em card "chart-first" (gráfico acima do texto). */
+export declare function ChartChartFirstLine({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 24 · Anel de progresso com valor central. */
+export declare function ChartDonutGauge({ title, value, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 25 · Anel dividido em segmentos categóricos. */
+export declare function ChartDonutSegments({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 26 · Anéis concêntricos (vários indicadores no mesmo alvo). */
+export declare function ChartConcentricRings({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 27 · Pizza de participação. */
+export declare function ChartSharePie({ title, data, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 28 · Rosca de participação com valor destacado. */
+export declare function ChartDonutShare({ title, data, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 29 · Medidor linear de progresso com marcador de máximo. */
+export declare function ChartProgressMeter({ title, value, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 30 · Score em anel com variação e leitura qualitativa. */
+export declare function ChartScoreDial({ title, value, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 31 · Mapa de contribuição (calor por dia). */
+export declare function ChartContributionHeatmap({ title, ...rest }: InsightChartProps): React.JSX.Element;
+/** 32 · Intensidade por faixa (pontos graduados). */
+export declare function ChartIntensityScale({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 33 · Card com pessoa responsável no rodapé. */
+export declare function ChartOwnerSpotlight({ title, data, unit, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 34 · Placar de equipe (ranking + avatar do líder). */
+export declare function ChartTeamScoreboard({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 35 · Resumo comparativo (barras + leitura lado a lado). */
+export declare function ChartComparisonSummary({ title, data, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** Famílias de infográficos usadas na navegação da área de Charts. */
+export declare const INSIGHT_FAMILIES: readonly ["Barras", "Linhas & Áreas", "Radiais", "Matriz & Pessoas"];
+export type InsightFamily = (typeof INSIGHT_FAMILIES)[number];
+/** Entrada do catálogo de variantes (usada nos docs e no seletor de widgets). */
+export interface InsightChartEntry {
+    id: string;
+    label: string;
+    family: InsightFamily;
+    description: string;
+    /** Componente da variante. Todos aceitam `InsightChartProps`. */
+    Component: React.ComponentType<InsightChartProps & InsightMultiChartProps>;
+    /** A variante consome séries simples (`data: {label, value}[]`). */
+    simple: boolean;
+}
+/** Catálogo canônico das 35 variantes de infográfico. */
+export declare const INSIGHT_CHARTS: InsightChartEntry[];
+/** Busca uma variante do catálogo pelo id. */
+export declare const findInsightChart: (id: string) => InsightChartEntry;
+/** Agrupa o catálogo por família (ordem de `INSIGHT_FAMILIES`). */
+export declare const insightChartsByFamily: () => {
+    family: "Barras" | "Linhas & Áreas" | "Radiais" | "Matriz & Pessoas";
+    charts: InsightChartEntry[];
+}[];
+/** Grade responsiva padrão para exibir infográficos. */
+export declare const INSIGHT_GRID: string;

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

@@ -0,0 +1,145 @@
+/**
+ * @module InsightWidgets
+ * Sistema de widgets do Design System: transforma um indicador (regra de
+ * cálculo) + um escopo (projeto, unidade, período…) + uma variante do catálogo
+ * de Insight Charts em um cartão pronto para painéis.
+ *
+ * Reutilizável em telas de relatório, telas de projeto e cockpits: a tela só
+ * declara os indicadores e escopos; a montagem, o seletor e a grade vêm daqui.
+ */
+import * as React from 'react';
+import type { Icon as PhosphorIcon } from '@phosphor-icons/react';
+import type { InsightTone } from './insight-tokens';
+import type { InsightPoint, InsightSeries } from './insight-primitives';
+import { type InsightChartEntry, type InsightDatum } from './insight-variants';
+/** Escopo do widget: o "onde" do indicador (projeto, unidade, carteira…). */
+export interface WidgetScope {
+    id: string;
+    label: string;
+    /** Texto curto exibido como kicker do cartão. Default: `label`. */
+    caption?: string;
+}
+/** Resultado do cálculo de um indicador para um escopo. */
+export interface WidgetIndicatorResult {
+    /** Série simples (variantes `simple`). */
+    data?: InsightDatum[];
+    /** Pontos multi-série (variantes não `simple`). */
+    points?: InsightPoint[];
+    /** Definição das séries para variantes multi-série. */
+    series?: InsightSeries[];
+    /** Valor principal já formatado ou numérico. */
+    value?: React.ReactNode;
+    /** Variação percentual. */
+    delta?: number;
+    /** Texto de comparação do delta. */
+    comparison?: React.ReactNode;
+}
+/** Indicador disponível para virar widget. */
+export interface WidgetIndicator {
+    id: string;
+    label: string;
+    /** Unidade exibida ao lado do valor ("%", "tarefas"…). */
+    unit?: string;
+    /** Tom semântico do cartão. Default: `brand`. */
+    tone?: InsightTone;
+    /** Ícone Phosphor do cartão. */
+    icon?: PhosphorIcon;
+    /** Descrição curta do indicador (usada no cartão). */
+    description?: React.ReactNode;
+    /** Variante sugerida quando a pessoa não escolhe uma. */
+    suggestedChart?: string;
+    /** Calcula série e valor para o escopo informado. */
+    compute: (scopeId: string) => WidgetIndicatorResult;
+}
+/** Configuração de um widget montado. */
+export interface WidgetConfig {
+    /** Chave estável do widget no painel. */
+    key: string;
+    indicatorId: string;
+    scopeId: string;
+    chartId: string;
+}
+/** Gera uma chave estável para um novo widget. */
+export declare const createWidgetKey: () => string;
+export interface InsightWidgetProps {
+    /** Indicador que fornece os dados. */
+    indicator: WidgetIndicator;
+    /** Escopo do cálculo. */
+    scope: WidgetScope;
+    /** Id da variante do catálogo (`INSIGHT_CHARTS`). */
+    chartId: string;
+    /** Ações extras no canto superior direito do cartão. */
+    actions?: React.ReactNode;
+    /** Quando informado, exibe o botão de remoção em hover/foco. */
+    onRemove?: () => void;
+    /** Exibe o nome da variante ao lado das ações. Default: `true`. */
+    showChartLabel?: boolean;
+    /** Altura do gráfico. */
+    height?: number;
+    className?: string;
+}
+/**
+ * Um widget: indicador + escopo + variante de chart, renderizado com os
+ * componentes canônicos de Insight Charts.
+ */
+export declare function InsightWidget({ indicator, scope, chartId, actions, onRemove, showChartLabel, height, className, }: InsightWidgetProps): React.JSX.Element;
+/** Seleção corrente do seletor de widgets. */
+export interface WidgetSelection {
+    indicatorId: string;
+    scopeId: string;
+    chartId: string;
+}
+export interface WidgetPickerProps {
+    indicators: WidgetIndicator[];
+    scopes: WidgetScope[];
+    /** Subconjunto do catálogo. Default: as 35 variantes. */
+    charts?: InsightChartEntry[];
+    value: WidgetSelection;
+    onChange: (value: WidgetSelection) => void;
+    onAdd: (value: WidgetSelection) => void;
+    /** Rótulos dos campos. */
+    labels?: {
+        indicator?: string;
+        scope?: string;
+        chart?: string;
+        add?: string;
+    };
+    className?: string;
+}
+/** Barra de composição: indicador, escopo, variante e ação de adicionar. */
+export declare function WidgetPicker({ indicators, scopes, charts, value, onChange, onAdd, labels, className, }: WidgetPickerProps): React.JSX.Element;
+export interface WidgetBoardProps {
+    widgets: WidgetConfig[];
+    indicators: WidgetIndicator[];
+    scopes: WidgetScope[];
+    /** Colunas máximas da grade. Default: 3. */
+    columns?: 1 | 2 | 3 | 4;
+    /** Quando informado, cada widget ganha ação de remoção. */
+    onRemoveWidget?: (key: string) => void;
+    /** Estado vazio customizado. */
+    empty?: React.ReactNode;
+    /** Altura dos gráficos. */
+    height?: number;
+    className?: string;
+}
+/** Grade de widgets somente-leitura (ou removíveis, com `onRemoveWidget`). */
+export declare function WidgetBoard({ widgets, indicators, scopes, columns, onRemoveWidget, empty, height, className, }: WidgetBoardProps): React.JSX.Element;
+export interface WidgetDashboardProps extends Pick<WidgetBoardProps, 'indicators' | 'scopes' | 'columns' | 'empty' | 'height' | 'className'> {
+    /** Painel inicial (modo não controlado). */
+    defaultWidgets?: WidgetConfig[];
+    /** Painel controlado. */
+    widgets?: WidgetConfig[];
+    onWidgetsChange?: (widgets: WidgetConfig[]) => void;
+    /** Exibe a barra de composição. Default: `true`. */
+    editable?: boolean;
+    /** Subconjunto do catálogo oferecido no seletor. */
+    charts?: InsightChartEntry[];
+    labels?: WidgetPickerProps['labels'];
+    /** Callback após adicionar (ex.: toast). */
+    onAdd?: (widget: WidgetConfig) => void;
+}
+/**
+ * Painel completo: barra de composição + grade. Funciona controlado
+ * (`widgets` + `onWidgetsChange`) ou autônomo (`defaultWidgets`).
+ */
+export declare function WidgetDashboard({ indicators, scopes, defaultWidgets, widgets: controlled, onWidgetsChange, editable, charts, labels, onAdd, columns, empty, height, className, }: WidgetDashboardProps): React.JSX.Element;

package/dist/components/layout/AppHeader.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 interface AppHeaderProps {
     actions?: React.ReactNode;
+    /** Perfil da pessoa usuária (nome, avatar, área) exibido no canto direito. */
+    profile?: React.ReactNode;
+    /** Foto do usuário do produto (sobrepõe a resolução padrão da Identity API). */
+    userPhotoUrl?: string | null;
+    /** Estratégia de upload da foto de avatar do produto. */
+    onUploadUserPhoto?: (file: File) => Promise<void> | void;
 }
 declare const AppHeader: React.NamedExoticComponent<AppHeaderProps>;
 export default AppHeader;

package/dist/components/layout/AppLayout.d.ts

@@ -6,6 +6,14 @@ interface AppLayoutProps {
     sidebarConfig?: SidebarConfig;
     showHeader?: boolean;
     showSidebar?: boolean;
+    sidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** Bloco de perfil renderizado à direita do header (nome, avatar, área). */
+    headerProfile?: ReactNode;
+    /** Foto do avatar do usuário do produto (sobrepõe a resolução padrão). */
+    userPhotoUrl?: string | null;
+    /** Estratégia de upload da foto de avatar do produto. */
+    onUploadUserPhoto?: (file: File) => Promise<void> | void;
 }
 export declare const AppLayout: import("react").NamedExoticComponent<AppLayoutProps>;
 export {};

package/dist/components/layout/AppSidebar.d.ts

@@ -1,10 +1,17 @@
 import { SidebarConfig } from '../../types/sidebar';
+import { type SidebarBrandVariant } from './SidebarBrandBar';
 interface AppSidebarProps {
     config?: SidebarConfig;
     customContent?: React.ReactNode;
     resizable?: boolean;
     minWidth?: number;
     maxWidth?: number;
+    /** Esqueleto do topo da navegação. Default `symbol`. */
+    brandVariant?: SidebarBrandVariant;
+    /** Logo em texto do produto ativo (variante `product-wordmark`). */
+    productWordmark?: string;
+    /** Texto alternativo do logo do produto. */
+    productWordmarkAlt?: string;
 }
-export declare function AppSidebar({ config, customContent, resizable, minWidth, maxWidth }?: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar({ config, customContent, resizable, minWidth, maxWidth, brandVariant, productWordmark, productWordmarkAlt, }?: AppSidebarProps): import("react").JSX.Element;
 export default AppSidebar;

package/dist/components/layout/HeaderLegacyMenu.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @module HeaderLegacyMenu
+ * Botão "Legacy" no extremo direito do header (ao lado dos botões-ícone) que
+ * encapsula os acessos que existiam no bloco de perfil do DS v1: Wiki,
+ * troca de unidade, editar perfil e sair. Serve como ponte durante a migração
+ * para o DS v2, sem manter a área legada visível no header.
+ */
+import React from 'react';
+import type { Company } from '../../types';
+export interface HeaderLegacyMenuProps {
+    /** Unidade ativa (quando o header já resolveu pelo alias da URL). */
+    selectedUnit?: Company | null;
+    onUnitChange?: (unit: Company) => void;
+    /** Abre o diálogo de edição de perfil (quando disponível no app). */
+    onEditProfile?: () => void;
+}
+export declare const HeaderLegacyMenu: React.FC<HeaderLegacyMenuProps>;
+export default HeaderLegacyMenu;

package/dist/components/layout/HeaderUserMenu.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @module HeaderUserMenu
+ * Área de perfil do header no padrão do DS v2 (tokens semânticos + Phosphor duotone).
+ * Substitui o antigo bloco `UserInfo` legado no canto direito do `AppHeader`,
+ * mantendo as mesmas ações: trocar unidade, editar perfil e sair.
+ */
+import React from 'react';
+import type { Company } from '../../types';
+export interface HeaderUserMenuProps {
+    selectedUnit?: Company | null;
+    onUnitChange?: (unit: Company) => void;
+    className?: string;
+    /**
+     * URL da foto do usuário do produto. Quando informada, substitui a resolução
+     * padrão (Identity API do Qualiex).
+     */
+    userPhotoUrl?: string | null;
+    /**
+     * Estratégia de upload do produto. Quando ausente, o dialog usa a Identity API.
+     */
+    onUploadPhoto?: (file: File) => Promise<void> | void;
+}
+export declare const HeaderUserMenu: React.FC<HeaderUserMenuProps>;
+export default HeaderUserMenu;

package/dist/components/layout/PageHeader.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentType, ReactNode } from 'react';
+/** Limite canônico do subtítulo do PageHeader. */
+export declare const SUBTITLE_MAX_LENGTH = 100;
+export interface PageHeaderProps {
+    /** Título da tela (único h1 da página). */
+    title: ReactNode;
+    /** Subtítulo introdutório: 1 linha, no máximo 100 caracteres. */
+    subtitle?: ReactNode;
+    /** Informação rápida de ajuda/atenção, exibida abaixo do subtítulo. */
+    hint?: ReactNode;
+    /** Variante 1 — tags e badges de contexto, ao lado do título. */
+    badges?: ReactNode;
+    /** Variante 2 — ação primária da tela, alinhada à direita. */
+    actions?: ReactNode;
+    /** `md` (default) é o tamanho canônico. `lg` (35px) é legado — não usar em telas novas. */
+    size?: 'md' | 'lg';
+    /** Linha divisória inferior. */
+    divider?: boolean;
+    className?: string;
+    children?: ReactNode;
+    /**
+     * Marca este header como conteúdo de demonstração (preview de documentação):
+     * ele ignora a regra de "um PageHeader por página".
+     */
+    demo?: boolean;
+    /**
+     * @deprecated O padrão canônico do DS não usa ícone no topo.
+     * Para o modelo legado com tile, use `PageHeaderWithIcon`.
+     */
+    icon?: ComponentType<any>;
+    /** @deprecated Sem efeito — ver `PageHeaderWithIcon`. */
+    iconWeight?: string;
+}
+/**
+ * Cabeçalho canônico do corpo da página (body header) — padrão do DS.
+ *
+ * Esqueleto fixo: **h1 + subtítulo introdutório de 1 linha** (+ ajuda/atenção),
+ * com duas variantes oficiais: `badges` (contexto) e `actions` (CTA).
+ * Sem ícone — o tile foi movido para a variante legada `PageHeaderWithIcon`.
+ *
+ * Regra imutável: **um PageHeader por página**. Dentro de um `PageHeaderScope`
+ * (casca da página), só o primeiro header renderiza; tudo abaixo dele é `h2`
+ * para baixo. Previews de documentação usam `demo` ou `PageHeaderDemoScope`.
+ */
+export declare function PageHeader({ title, subtitle, hint, badges, actions, size, divider, className, children, demo, icon, iconWeight: _iconWeight, }: PageHeaderProps): import("react").JSX.Element;
+export default PageHeader;

package/dist/components/layout/PageHeaderScope.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface PageHeaderScopeProps {
+    children: ReactNode;
+    /** Muda o escopo (ex.: troca de rota) para liberar a reserva do header. */
+    scopeKey?: string;
+}
+export declare function PageHeaderScope({ children, scopeKey }: PageHeaderScopeProps): import("react").JSX.Element;
+/**
+ * Reabre o escopo para blocos de demonstração (previews de documentação),
+ * onde um `PageHeader` é conteúdo de exemplo — não o header da página.
+ */
+export declare function PageHeaderDemoScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Retorna `true` quando este header é o header da página (ou não há escopo). */
+export declare function usePageHeaderOwnership(bypass?: boolean): boolean;

package/dist/components/layout/SectionHeading.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+/**
+ * Escala canônica de títulos do Design System.
+ *
+ * Hierarquia obrigatória, por seção da página:
+ *
+ * | Nível | Onde vive | Tamanho | Peso | Divisória |
+ * |-------|-----------|---------|------|-----------|
+ * | `h1`  | `PageHeader` (único por página) | 22px (`size="md"` canônico; `lg` é legado) | 600 | opcional |
+ * | `h2`  | Seção de conteúdo (`SectionHeading level={2}`) | 16px | 600 | padrão sim |
+ * | `h3`  | Subseção dentro de uma seção | 13px | 600 | não |
+ * | `h4`  | Rótulo de bloco/legenda estrutural | 12px, uppercase, `tracking-wide` | 600 | não |
+ *
+ * Nada de `text-2xl`, `text-xl` ou `text-lg` em títulos: esses tamanhos
+ * competem com o `h1` do `PageHeader` e quebram a hierarquia da tela.
+ */
+export declare const HEADING_SCALE: {
+    readonly h1: {
+        readonly md: "text-[22px] leading-tight";
+        readonly lg: "text-[35px] leading-tight";
+    };
+    readonly h2: "text-[16px] leading-snug font-semibold tracking-tight text-foreground";
+    readonly h3: "text-[13px] leading-snug font-semibold text-foreground";
+    readonly h4: "text-[12px] font-semibold uppercase tracking-wide text-muted-foreground";
+};
+export type SectionHeadingLevel = 2 | 3 | 4;
+export interface SectionHeadingProps {
+    children: ReactNode;
+    /** Nível semântico e visual. Sempre `h2` para baixo — o `h1` é do `PageHeader`. */
+    level?: SectionHeadingLevel;
+    /** Descrição curta, logo abaixo do título. */
+    description?: ReactNode;
+    /** Ações à direita (opcional). */
+    actions?: ReactNode;
+    /** Divisória inferior. Padrão: `true` em `h2`, `false` nos demais níveis. */
+    divider?: boolean;
+    /** Âncora usada pelo índice da página. */
+    id?: string;
+    className?: string;
+}
+/**
+ * Cabeçalho de **seção** (h2), **subseção** (h3) ou **rótulo** (h4).
+ *
+ * Complementa o `PageHeader`: tudo que vem depois do topo da página usa este
+ * componente, garantindo um único conjunto de tamanhos em todo o DS e nos
+ * produtos derivados.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader title="Fornecedores" subtitle="Cadastro e qualificação." divider />
+ * <SectionHeading level={2} description="Dados obrigatórios.">Identificação</SectionHeading>
+ * <SectionHeading level={3}>Endereço fiscal</SectionHeading>
+ * <SectionHeading level={4}>Campos calculados</SectionHeading>
+ * ```
+ */
+export declare function SectionHeading({ children, level, description, actions, divider, id, className, }: SectionHeadingProps): import("react").JSX.Element;
+export default SectionHeading;

package/dist/components/layout/SidebarAtoms.d.ts

@@ -0,0 +1,60 @@
+import type { Icon as PhosphorIcon } from '@phosphor-icons/react';
+type AnyIcon = PhosphorIcon | React.ComponentType<{
+    className?: string;
+}>;
+/**
+ * Átomo canônico — Busca global do app.
+ *
+ * Expandido: campo com ícone, placeholder e limpar.
+ * Recolhido: botão de ícone com tooltip (aciona `onExpandRequest`).
+ * Sincroniza o termo em `?search=` com debounce de 300ms.
+ */
+export declare function SidebarSearchField({ isExpanded, placeholder, paramName, onExpandRequest, className, }: {
+    isExpanded: boolean;
+    placeholder?: string;
+    paramName?: string;
+    onExpandRequest?: () => void;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Átomo canônico — Bloco de feature em destaque (CTA).
+ * Superfície com relevo, acento do tema e descrição opcional.
+ */
+export declare const SidebarFeatureCta: import("react").ForwardRefExoticComponent<{
+    isExpanded: boolean;
+    icon: AnyIcon;
+    label: string;
+    description?: string;
+    active?: boolean;
+    onClick?: () => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Átomo canônico — Rótulo de categoria da lista de navegação.
+ */
+export declare function SidebarNavCategory({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Átomo canônico — Item de navegação com chevron de submenu.
+ */
+export declare function SidebarNavRow({ icon: Icon, label, active, hasChildren, open, depth, trailing, onClick, }: {
+    icon?: AnyIcon;
+    label: React.ReactNode;
+    active?: boolean;
+    hasChildren?: boolean;
+    open?: boolean;
+    depth?: number;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+/**
+ * Átomo canônico — Rodapé segregado da navegação.
+ * Área isolada por borda superior, reservada a features verticais
+ * e botões de usabilidade (laboratório, ajuda, atalhos, etc.).
+ */
+export declare function SidebarUtilityRail({ isExpanded, children, className, }: {
+    isExpanded: boolean;
+    children: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/layout/SidebarBrandBar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Variantes do topo da navegação:
+ * - `symbol` (default): símbolo animado + botão de recolher.
+ * - `product-wordmark`: esqueleto em 3 slots — símbolo animado, logo em texto
+ *   do produto ativo (preenche a altura útil da linha) e botão de recolher.
+ */
+export type SidebarBrandVariant = 'symbol' | 'product-wordmark';
+interface SidebarBrandBarProps {
+    isExpanded: boolean;
+    appName?: string;
+    onToggle: () => void;
+    /** Esqueleto do topo. Default `symbol`. */
+    brandVariant?: SidebarBrandVariant;
+    /** URL do logo em texto do produto ativo (usado em `product-wordmark`). */
+    productWordmark?: string;
+    /** Texto alternativo do logo do produto. */
+    productWordmarkAlt?: string;
+    /** Ação ao clicar no logo em texto (ex.: navegar para o cockpit inicial). */
+    onLogoClick?: () => void;
+}
+/**
+ * Bloco fixo no topo da navegação: signo da marca + botão hamburguer.
+ * Recolhido, o hamburguer fica "debaixo" do signo e aparece no hover.
+ * Também expõe o grupo "Produtos", que abre o diálogo de módulos.
+ */
+export declare function SidebarBrandBar({ isExpanded, appName, onToggle, brandVariant, productWordmark, productWordmarkAlt, onLogoClick, }: SidebarBrandBarProps): import("react").JSX.Element;
+export {};

package/dist/components/layout/sidebar-utils.d.ts

@@ -9,4 +9,6 @@ interface Module {
     status: 'active' | 'inactive';
 }
 export declare const handleModuleClick: (modules: Module[] | undefined, moduleUrl: string) => void;
+export declare const subscribeSidebarPinned: (listener: () => void) => (() => void);
+export declare const emitSidebarPinned: (pinned: boolean) => void;
 export {};