/* Tema e ajustes do editor de regras, para CodeMirror 5. * * O que este arquivo faz e o que NÃO faz: * * - As classes do MENU de sugestões — .cm-completionIcon, .cm-completionLabel, * .cm-completionDetail e as variantes de ícone — continuam vindo do CSS * congelado (app.css), verbatim. É o visual estilo VSCode que o React já * tinha, e o rule-editor.js emite exatamente a mesma marcação de três * partes para que aquelas regras casem. * - O que muda de nome é só o CONTÊINER: o CM6 chamava .cm-tooltip-autocomplete * e li[aria-selected]; o CM5 chama .CodeMirror-hints e .CodeMirror-hint-active. * As declarações abaixo são cópias das de app.css, com o seletor trocado. * * O tema de sintaxe (.cm-s-fz) é escrito em termos dos tokens HSL do projeto. * Como `.dark` vive no e os tokens viram sozinhos, UM único tema cobre * os dois modos — melhor que o React, que recalculava isDark e trocava o * objeto de tema inteiro. * * RESSALVA HONESTA: o plano previa amostrar as cores exatas com * getComputedStyle no editor React em execução. Isso não é mais possível — o * SPA não compila sem Node. As cores de token abaixo foram derivadas da paleta * do @uiw/codemirror-theme-github, não medidas. É o único ponto do portal onde * a paridade de cor é aproximada em vez de verificada, e está registrado como * tal no CLAUDE.md. */ /* ------------------------------------------------------------- moldura ---- */ .CodeMirror { height: auto; min-height: 200px; background: transparent; color: hsl(var(--foreground)); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.6; } .CodeMirror-scroll { min-height: 200px; } .CodeMirror-gutters { background: transparent; border-right: 1px solid hsl(var(--border)); } .CodeMirror-linenumber { color: hsl(var(--muted-foreground)); opacity: 0.6; } .CodeMirror-cursor { border-left: 1px solid hsl(var(--foreground)); } .CodeMirror-activeline-background { background: hsl(var(--muted) / 0.4); } .CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: hsl(var(--primary) / 0.25); } .CodeMirror-matchingbracket { color: hsl(var(--primary)) !important; border-bottom: 1px solid hsl(var(--primary)); } .CodeMirror-placeholder { color: hsl(var(--muted-foreground)); opacity: 0.6; } /* -------------------------------------------------------- realce de sintaxe */ .cm-s-fz .cm-comment { color: hsl(215 14% 52%); font-style: italic; } .cm-s-fz .cm-string { color: hsl(215 80% 68%); } .cm-s-fz .cm-number { color: hsl(28 90% 62%); } .cm-s-fz .cm-atom { color: hsl(28 90% 62%); } .cm-s-fz .cm-keyword { color: hsl(348 80% 66%); } .cm-s-fz .cm-def { color: hsl(265 75% 72%); } .cm-s-fz .cm-variable { color: hsl(var(--foreground)); } .cm-s-fz .cm-operator { color: hsl(348 80% 66%); } .cm-s-fz .cm-bracket { color: hsl(var(--muted-foreground)); } /* ------------------------------------------ contêiner do menu de sugestões -- * Cópia das declarações de .cm-tooltip-autocomplete do app.css, com o seletor * do CM5. Os !important vieram junto: sem eles as regras próprias do * codemirror.css, carregado depois, voltam a vencer. */ .CodeMirror-hints { z-index: 2147483647 !important; background: hsl(var(--popover)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: 6px !important; box-shadow: 0 8px 24px hsl(0 0% 0% / 0.15), 0 2px 8px hsl(0 0% 0% / 0.1) !important; overflow-y: auto !important; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace !important; font-size: 13px !important; max-height: 260px !important; padding: 4px 0 !important; margin: 0 !important; list-style: none !important; } .dark .CodeMirror-hints { box-shadow: 0 8px 24px hsl(0 0% 0% / 0.4), 0 2px 8px hsl(0 0% 0% / 0.3) !important; } .CodeMirror-hint { padding: 4px 8px !important; display: flex !important; align-items: center !important; gap: 8px !important; color: hsl(var(--foreground)) !important; cursor: pointer !important; border-radius: 0 !important; white-space: nowrap !important; max-width: none !important; } .CodeMirror-hint-active, .CodeMirror-hint:hover { background: hsl(var(--primary) / 0.15) !important; color: hsl(var(--foreground)) !important; } /* ----------------------------------------------------------------- hover -- * .cm-fz-hover já existe no CSS congelado; aqui só entra o posicionamento, * que no CM6 era responsabilidade do hoverTooltip e agora é do rule-editor.js. */ .cm-fz-hover { max-width: 28rem; pointer-events: none; } /* ------------------------------------------------- painel de documentação -- * O equivalente ao Completion.info do CM6, que o CM5 não tem. O texto longo de * cada item já viajava do servidor e só era alcançável passando o mouse sobre o * token DEPOIS de escrevê-lo — ou seja, tarde demais para ajudar a escolher. * Segue a mesma paleta e a mesma sombra de .CodeMirror-hints, para ler como uma * segunda coluna do mesmo popup, e não como outro widget. */ .cm-fz-doc { position: absolute; z-index: 61; max-width: 22rem; max-height: 260px; overflow-y: auto; padding: 8px 10px; font-size: 0.8125rem; line-height: 1.4; background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-radius: 6px; box-shadow: 0 8px 24px hsl(0 0% 0% / 0.12), 0 2px 8px hsl(0 0% 0% / 0.08); pointer-events: none; } .dark .cm-fz-doc { box-shadow: 0 8px 24px hsl(0 0% 0% / 0.4), 0 2px 8px hsl(0 0% 0% / 0.3); } .cm-fz-doc-titulo { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: 4px; } /* ------------------------------------------- marcadores de snippet (Tab) -- * O snippetCompletion do CM6 não tem equivalente no CM5. Os trechos por onde o * Tab anda ficam realçados enquanto o modo snippet está ativo; sair da região * o encerra, e o realce some junto. */ .cm-fz-tabstop { background: hsl(var(--primary) / 0.18); border-radius: 2px; } /* ------------------------------------------------------ erro sublinhado -- * O addon lint do CM5 não é vendorado: traz plumbing assíncrono próprio e mais * CSS congelado. A marcação à mão usa a posição REAL (linha e coluna) que o * parser passou a devolver — antes o erro trazia só um offset de byte * interpolado no meio da mensagem. */ .cm-fz-erro { text-decoration: underline wavy hsl(var(--destructive)); text-underline-offset: 3px; } .cm-fz-marcador-erro { color: hsl(var(--destructive)); font-size: 0.7rem; line-height: 1; } .CodeMirror-gutter.cm-fz-erros { width: 12px; }