@thibezer/ui-components-kit 2.7.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 2.8.1 — 2026-10-21
+
+### `<ui-canvas-cad>`: popups e câmera só a pedido (como CAD/GIS)
+
+- **Popups sob demanda (mudança de comportamento):** clicar numa feição, vértice, linha ou polígono **não abre mais o popup nem move o mapa** (o Leaflet abria no clique e fazia auto-pan). Abrem com **duplo clique** sobre a camada, por `abrirPopupFeicao(camadaId, id)` ou, no código, por `marcador.openPopup()` fora de um clique. Popups abertos a pedido não fazem auto-pan. Novo atributo/propriedade `popups`: `sob-demanda` (padrão), `automatico` (comportamento antigo: abre ao selecionar uma feição, com auto-pan e `definirMargensPopup`) e `desligado` (clique e duplo clique não abrem). A consulta SIGEF segue abrindo ao clicar (é um pedido explícito). No modo sob demanda, terminar a edição de vértices não reabre o popup.
+- **Implementação:** `popup_gate.ts` (`PortaoPopups`, `liberarPopups`, `lerModoPopups`) intercepta `map.addLayer` só para popups e separa clique do mouse de abertura pelo código; `FeicaoPopup` aceita `liberar`; `PonteiroFeicoes.duploClique` e `GerenciadorFeicoes.abrirPopupFeicao`/`aoDuploClique`.
+- **`selectPonto(id)` / `selecionarPonto(id)`:** só seleciona. Antes recentralizava o mapa sempre e abria o popup; agora isso acontece apenas com `zoomLevel` informado (pedido de "ir até o ponto").
+- **Zoom em passos finos:** `zoomSnap: 0.25`, `zoomDelta: 0.5`, `wheelPxPerZoomLevel: 90` (antes 1, 1 e 60: cada giro da roda saltava um nível inteiro). Zoom fracionário é aceito por simplificação, clusters, densidade e pré-carga de tiles.
+- **Botão do meio:** o duplo clique que enquadra (`zoomExtents`) agora exige dois cliques limpos; dois arrastes rápidos em sequência (pan) não enquadram mais.
+- **Toque:** removido o zoom próprio da pinça (passos de 1 nível, em paralelo ao `touchZoom` do Leaflet, que também reagia ao mesmo gesto). Um dedo continua arrastando.
+- **Não mudou:** `zoomParaFeicao(s)`, `ajustarTudo`, `ajustarCamada`, `fitBounds`, clique em cluster, ação "zoom" do popup e o botão "Enquadrar" seguem como pedidos explícitos. `zoomExtents` continua considerando só os vértices (não as feições).
+
+### `<ui-camadas>`: busca, espaço da lista e documentação de eventos
+
+- **Busca por nome de camada (correção):** o campo "Buscar camada ou feição" só filtrava feições; buscar `eixos` deixava todas as camadas na tela com "Nenhum item correspondente", inclusive a que casava. Agora a árvore mostra só camadas que casam (pelo nome) ou que levam a um resultado, mantendo os grupos ancestrais; um grupo que casa traz suas subcamadas; sem resultado há uma mensagem única (termo escapado). Nova função pura `filtrarCamadasPorBusca()` em `camadas-selecao.ts`; a seleção em intervalo (`Shift`) segue as mesmas linhas.
+- **Mapa base recolhível:** novo atributo/propriedade `mapas-base-recolhido` / `mapasBaseRecolhido`, e o cabeçalho "Mapa Base" vira botão (`aria-expanded`) que mostra o mapa ativo. Novo evento `ui-mapas-base-recolhimento` (`{ recolhido }`), só para ação do usuário. Padrão inalterado (aberta).
+- **Espaço da lista:** `.ui-panel-box` passa de `min-height: 80px` para `140px`, para a árvore não ficar espremida por rodapé e mapas base em painéis `docked` baixos (o corpo rola abaixo disso).
+- **Documentação:** `ui-camada-grupo-adicionar` é emitido com `{ isGroup: true }` (o README dizia `{ grupoId, nome }`); `ui-camada-adicionar` (`{}` ou `{ parentId }`) passa a constar na tabela. Ambos são pedidos: sem handler no aplicativo, os botões não criam nada.
+
+## 2.8.0 — 2026-10-17
+
+### Controles na mesma linha: altura única e `<ui-linha>`
+
+- **Novo `<ui-linha>`** (L3): contêiner que alinha botão, campo, lista, segmented e badge na mesma linha. `tamanho`/`densidade` (`sm|md|lg`), `altura`, `alinhar`, `justificar`, `espaco`, `sem-quebra`, `inline`; filhos ganham largura natural (botão e campo deixam de ocupar 100%), campos e listas ocupam o espaço restante e qualquer filho aceita `expandir`.
+- **`tamanho`, `densidade` e `altura` agora funcionam** em `ui-botao`, `ui-campo-texto`, `ui-lista-flutuante` e `ui-segmented` (o README já os documentava, mas só `altura` tinha efeito). Lógica única em `src/core/altura-controle.ts` (exportada em `core`): entrada hostil é descartada, `altura` é limitada a 15–200px.
+- **`ui-segmented` segue `--ui-campo-altura`** (antes tinha alturas fixas de 28/36/42px, o que o desalinhava do botão e do campo). O host passou a `inline-flex` com `vertical-align: middle`. `tamanho` inválido não vira mais classe CSS arbitrária (cai em `md`).
+- **Escala de tokens** `--ui-altura-sm|md|lg` (26/34/42px). **Mudança de comportamento:** a altura padrão dos controles passou de 15px para `--ui-altura-md` (34px), o valor que o README já descrevia como padrão. Quem quiser o antigo define `--ui-campo-altura: 15px`.
+- **`ui-badge[controle]`** assume a altura dos controles (e o alvo de toque mínimo no mobile).
+- Hosts `inline` de botão, campo e lista ganharam `vertical-align: middle`.
+- Teste de contrato `tests/contrato-linha.test.ts` + regressões; guia em `docs/layout-linha.md`.
+
 ## 2.7.0 — 2026-10-17
 
 ### `UIBus`: independente do componente de toast

package/README.md

@@ -150,7 +150,7 @@ Configurações simples passadas diretamente nas tags:
 
 ### 📏 Ajuste de Altura e Dimensionamento Inteligente (Zero Atrito)
 
-Os campos de texto (`<ui-campo-texto>`), listas flutuantes/selects (`<ui-lista-flutuante>`, `<ui-select>`) e botões (`<ui-botao-primario>`) possuem 4 formas flexíveis de ajuste de altura:
+Os campos de texto (`<ui-campo-texto>`), listas flutuantes/selects (`<ui-lista-flutuante>`, `<ui-select>`), botões (`<ui-botao>`) e o controle segmentado (`<ui-segmented>`) leem **a mesma variável**, `--ui-campo-altura`, e por isso têm sempre a mesma altura lado a lado. Há 5 formas de ajustá-la:
 
 #### 1. Via Atributo de Tamanho Predefinido (`tamanho` ou `densidade`):
 ```html
@@ -194,6 +194,29 @@ UIBus.definirDensidade('relaxada'); // 42px
 UIBus.definirDensidade(38);         // Valor numérico em px customizado
 ```
 
+#### 5. Via Contêiner de Linha (`<ui-linha>`): a forma de menor esforço
+Quando vários controles ficam na mesma linha, envolva-os em `<ui-linha>`: um único atributo define a altura de todos, e o contêiner cuida de alinhamento, espaço, quebra e largura (botão e campo deixam de ocupar 100%).
+
+```html
+<ui-linha tamanho="sm" justificar="entre">
+  <ui-segmented valor="todos"><span valor="todos">Todos</span><span valor="abertos">Abertos</span></ui-segmented>
+  <ui-campo-texto placeholder="Buscar..."></ui-campo-texto>   <!-- ocupa o espaço que sobrar -->
+  <ui-botao variante="primario">Adicionar</ui-botao>
+  <ui-badge controle>Carlos</ui-badge>                        <!-- [controle]: badge com a altura dos controles -->
+</ui-linha>
+```
+
+| Atributo (`ui-linha`) | Valores | Padrão |
+| :--- | :--- | :--- |
+| `tamanho` / `densidade` | `sm` (26px), `md` (34px), `lg` (42px); também `compacta`, `padrao`, `relaxada` | herda do token global |
+| `altura` | `40`, `40px`, `2.5rem` (vence `tamanho`) | - |
+| `alinhar` | `centro`, `inicio`, `fim`, `esticar` (use `fim` quando um campo tem rótulo acima) | `centro` |
+| `justificar` | `inicio`, `centro`, `fim`, `entre`, `ao-redor` | `inicio` |
+| `espaco` | `nenhum`, `xs`, `sm`, `md`, `lg` | `sm` |
+| `sem-quebra` / `inline` | booleanos | a linha quebra |
+
+Regras do contrato: o filho com `tamanho`/`altura` próprio vence só ele; `expandir` em qualquer filho faz ocupar o espaço restante; CSS do consumidor (`style`, classe) vence as regras do contêiner. Tokens: `--ui-altura-sm|md|lg` (escala), `--ui-campo-altura` (valor efetivo), `--ui-linha-espaco`, `--ui-linha-campo-base`. No mobile (≤ 640px) todos os controles sobem para no mínimo 38px (alvo de toque), sem exceção, para continuarem alinhados. Mais detalhes em [`docs/layout-linha.md`](docs/layout-linha.md).
+
 ---
 
 ### 2. Propriedades JavaScript (Dados Complexos)
@@ -708,8 +731,9 @@ window.addEventListener('message', (event) => {
 | `<ui-checkbox>` | Caixa de seleção múltipla com estado indeterminado. | `marcado`, `indeterminado`, `name`, `value` | `ui-change` |
 | `<ui-radio>` | Opção única com agrupamento automático por nome. | `marcado`, `name`, `value` | `ui-change` |
 | `<ui-switch>` | Chave de alternância liga/desliga física instantânea. | `ativo`, `name`, `value` | `ui-change` |
-| `<ui-segmented>` | Controle segmentado de opções (Pills/Tabs deslizantes). | `opcoes`, `value`, `name`, `tamanho` | `ui-change`, `ui-selecionar` |
-| `<ui-badge>` / `<ui-chip>` | Tags de status e chips com botão de remoção. | `variante`, `removivel`, `value` | `ui-remove` |
+| `<ui-segmented>` | Controle segmentado de opções (Pills/Tabs deslizantes). | `opcoes`, `value`, `name`, `tamanho`, `altura` | `ui-change`, `ui-selecionar` |
+| `<ui-badge>` / `<ui-chip>` | Tags de status e chips com botão de remoção. | `variante`, `removivel`, `value`, `controle` | `ui-remove` |
+| `<ui-linha>` | Contêiner que alinha controles na mesma linha (altura única, espaço, quebra). | `tamanho`, `altura`, `alinhar`, `justificar`, `espaco`, `sem-quebra` | - |
 | `<ui-avatar>` | Avatar com fotos, iniciais e status online. | `nome`, `src`, `status`, `tamanho` | - |
 
 ### 🟣 Camada 3: Contêineres, Overlays, Dados & GIS
@@ -731,7 +755,7 @@ window.addEventListener('message', (event) => {
 | `<ui-seletor-cor>` | Painel de cor flutuante: abas Preenchimento/Traço (ou cor única), prévia antes × depois, hexadecimal, seletor do sistema, opacidade, cores do projeto, paleta e "sem cor". Abra com `abrirSeletorCor({ ancora, ... })`: um por vez, Esc/clique fora confirmam, Cancelar restaura, `X` alterna o alvo. | `abrirSeletorCor()`, `fecharSeletorCor()`, `configurar()`, `modo` (`duplo`, `simples`), `alvo`, `preenchimento`, `traco`, `cor`, `opacidade`, `mostrarOpacidade`, `misto`, `coresProjeto`, `paleta`, `focar` | `ui-cor-input`, `ui-cor-confirmar`, `ui-cor-cancelar`, `ui-alvo-change` |
 | `<ui-mapa>` | Mapa geográfico interativo com camadas OpenStreetMap. | `lat`, `lng`, `zoom`, `camadas` | - |
 | `<ui-camadas>` | Painel de camadas vetoriais CAD/GIS com hierarquia em árvore, barra de arraste vertical (`redimensionavel`), estabilidade de altura sem colapso, drag-and-drop, métricas geodésicas e persistência no LocalStorage. | `redimensionavel`, `altura`, `min-altura`, `max-altura`, `flutuante`, `colapsado`, `camada-ativa`, `persistir` | `ui-redimensionar-altura`, `ui-camada-selecionada`, `ui-camada-visibilidade`, `ui-camadas-reordenadas`, `ui-acao-massa` |
-| `<ui-canvas-cad>` | Mesa CAD/GIS para poligonais, vértices geodésicos e **feições genéricas** (ponto, linha, polígono, círculo, texto) que você cria: seleção por clique e caixa, popup, edição de vértices, snap, 15 ferramentas de desenho/medição, oficial × prévia, cursores remotos e culling/clusters para 100 mil feições. Linha multiparte, feição `oculta`, selo de texto e contorno de ponto. Nenhuma camada vem pronta. Guia: [`docs/guia-migracao-mapengine.md`](docs/guia-migracao-mapengine.md). | `pontos`, `segmentos`, `ferramentas`, `sem-camadas-padrao`, `sem-painel-camadas`, `sem-barra-rapida`, `sem-atalho-snap`, `aceitar-origem`, `inicializarAgora()`, `definirFeicoes()`, `aplicarLote()`, `definirFerramenta()`, `editarVertices()`, `definirMargensHud()`, `definirEstilosExternos()`, `fitBounds()` | `ui-ponto-selecionado`, `cad-selecao`, `cad-feicao-selecionada`, `cad-feicao-criada`, `cad-feicao-atualizada`, `cad-feicao-hover`, `cad-feicao-menu`, `cad-snap`, `cad-previas` e outros (ver `docs/canvas-cad-eventos.md`) |
+| `<ui-canvas-cad>` | Mesa CAD/GIS para poligonais, vértices geodésicos e **feições genéricas** (ponto, linha, polígono, círculo, texto) que você cria: seleção por clique e caixa, popup, edição de vértices, snap, 15 ferramentas de desenho/medição, oficial × prévia, cursores remotos e culling/clusters para 100 mil feições. Linha multiparte, feição `oculta`, selo de texto e contorno de ponto. Nenhuma camada vem pronta. Guia: [`docs/guia-migracao-mapengine.md`](docs/guia-migracao-mapengine.md). | `pontos`, `segmentos`, `ferramentas`, `sem-camadas-padrao`, `sem-painel-camadas`, `sem-barra-rapida`, `sem-atalho-snap`, `aceitar-origem`, `popups`, `abrirPopupFeicao()`, `inicializarAgora()`, `definirFeicoes()`, `aplicarLote()`, `definirFerramenta()`, `editarVertices()`, `definirMargensHud()`, `definirEstilosExternos()`, `fitBounds()` | `ui-ponto-selecionado`, `cad-selecao`, `cad-feicao-selecionada`, `cad-feicao-criada`, `cad-feicao-atualizada`, `cad-feicao-hover`, `cad-feicao-menu`, `cad-snap`, `cad-previas` e outros (ver `docs/canvas-cad-eventos.md`) |
 
 #### `<ui-canvas-cad>`: montar só com API pública (2.1)
 

package/dist/altura-controle-ukMRPckR.cjs

@@ -0,0 +1 @@
+"use strict";const d=["sm","md","lg"],e="--ui-campo-altura";const u={sm:"sm",compacta:"sm",compacto:"sm",md:"md",padrao:"md",padrão:"md",normal:"md",lg:"lg",relaxada:"lg",relaxado:"lg",conforto:"lg"},T={sm:"var(--ui-altura-sm, 26px)",md:"var(--ui-altura-md, 34px)",lg:"var(--ui-altura-lg, 42px)"};function A(t){const r=(t??"").trim().toLowerCase();return Object.prototype.hasOwnProperty.call(u,r)?u[r]:null}function m(t){const r=A(t);return r?T[r]:null}function i(t){if(t==null)return null;const r=String(t).trim().toLowerCase(),n=/^(\d+(?:\.\d+)?|\.\d+)(px|rem|em)?$/.exec(r);if(!n)return null;const a=Number(n[1]);if(!Number.isFinite(a)||a<=0)return null;const l=n[2]??"px";return l==="px"?`${Math.min(200,Math.max(15,a))}px`:`${Math.min(12.5,a)}${l}`}function s(t){return i(t.altura)??m(t.tamanho)}function c(t){return{altura:t.getAttribute("altura")??t.getAttribute("height"),tamanho:t.getAttribute("tamanho")??t.getAttribute("size")??t.getAttribute("densidade")}}const o=new WeakSet;function _(t){try{const r=s(c(t));r?(t.style.setProperty(e,r),o.add(t)):o.has(t)&&(t.style.removeProperty(e),o.delete(t))}catch{}}exports.TAMANHOS_CONTROLE=d;exports.VARIAVEL_ALTURA_CONTROLE=e;exports.alturaDoTamanho=m;exports.aplicarAlturaControle=_;exports.lerEntradaAltura=c;exports.normalizarAltura=i;exports.normalizarTamanhoControle=A;exports.resolverAlturaControle=s;

package/dist/altura-controle-vxQiXG4q.js

@@ -0,0 +1,62 @@
+const p = ["sm", "md", "lg"], u = "--ui-campo-altura";
+const s = {
+  sm: "sm",
+  compacta: "sm",
+  compacto: "sm",
+  md: "md",
+  padrao: "md",
+  padrão: "md",
+  normal: "md",
+  lg: "lg",
+  relaxada: "lg",
+  relaxado: "lg",
+  conforto: "lg"
+}, l = {
+  sm: "var(--ui-altura-sm, 26px)",
+  md: "var(--ui-altura-md, 34px)",
+  lg: "var(--ui-altura-lg, 42px)"
+};
+function m(t) {
+  const a = (t ?? "").trim().toLowerCase();
+  return Object.prototype.hasOwnProperty.call(s, a) ? s[a] : null;
+}
+function i(t) {
+  const a = m(t);
+  return a ? l[a] : null;
+}
+function c(t) {
+  if (t == null) return null;
+  const a = String(t).trim().toLowerCase(), n = /^(\d+(?:\.\d+)?|\.\d+)(px|rem|em)?$/.exec(a);
+  if (!n) return null;
+  const r = Number(n[1]);
+  if (!Number.isFinite(r) || r <= 0) return null;
+  const e = n[2] ?? "px";
+  return e === "px" ? `${Math.min(200, Math.max(15, r))}px` : `${Math.min(12.5, r)}${e}`;
+}
+function A(t) {
+  return c(t.altura) ?? i(t.tamanho);
+}
+function d(t) {
+  return {
+    altura: t.getAttribute("altura") ?? t.getAttribute("height"),
+    tamanho: t.getAttribute("tamanho") ?? t.getAttribute("size") ?? t.getAttribute("densidade")
+  };
+}
+const o = /* @__PURE__ */ new WeakSet();
+function _(t) {
+  try {
+    const a = A(d(t));
+    a ? (t.style.setProperty(u, a), o.add(t)) : o.has(t) && (t.style.removeProperty(u), o.delete(t));
+  } catch {
+  }
+}
+export {
+  p as T,
+  u as V,
+  i as a,
+  _ as b,
+  m as c,
+  d as l,
+  c as n,
+  A as r
+};

package/dist/botao.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const o=require("./ui-botao-BOOnP8ds.cjs");exports.UIBotao=o.UIBotao;exports.UIBotaoPrimario=o.UIBotaoPrimario;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const o=require("./ui-botao-D24oXySA.cjs");exports.UIBotao=o.UIBotao;exports.UIBotaoPrimario=o.UIBotaoPrimario;

package/dist/botao.js

@@ -1,5 +1,5 @@
 /* empty css               */
-import { U as t, a as i } from "./ui-botao-DfqSivHl.js";
+import { U as t, a as i } from "./ui-botao-Dsj08jjw.js";
 export {
   t as UIBotao,
   i as UIBotaoPrimario