Mobile : navigation hamburger + socle mobile ka-ui (safe-area, dvh, z-index)
- P0 : composant components/mobile-nav.tsx (client) — bouton 44x44 aria-expanded
visible <768 px, panneau deroulant absolute top-full sous le header sticky
(pas de fixed sous le backdrop-blur), verrou de scroll ka-scroll-lock,
fermeture tap exterieur / Escape / navigation (usePathname), items >=44 px,
safe-area en bas, z-[900] (echelle --z-modal)
- P1 : viewportFit "cover" dans l export viewport (safe-area-inset-* actives)
- P1 : body min-h-screen -> min-h-dvh (barre navigateur mobile repliable)
- P2 : tailwind.config.ts — ./ka/**/*.{ts,tsx} ajoute au content
- P2 : cible tactile du wordmark etendue (after:-inset-2 sur le lien accueil)
- ka/tokens.css et public/ka-agent.js synchronises sur les canons ka-ui
(section SOCLE MOBILE OBLIGATOIRE : --z-*, --vh100, .ka-bottombar, .ka-menu,
.ka-overlay, ka-scroll-lock, anti-zoom iOS 16 px, .gk-badge etendu ;
agent : safe-area, textarea 16 px, plein ecran mobile + verrou scroll)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
5 changed files +251 −9
modified
apps/web/app/layout.tsx
+12 −2
@@ -15,6 +15,7 @@ import Link from "next/link"; | ||
| 15 | 15 | import { Wordmark } from "@/components/wordmark"; |
| 16 | 16 | import { LiveCrawl } from "@/components/live-crawl"; |
| 17 | 17 | import { AuthButton } from "@/components/auth-button"; |
| 18 | +import { MobileNav } from "@/components/mobile-nav"; | |
| 18 | 19 | import GroupeKaBadge from "@/ka/GroupeKaBadge"; |
| 19 | 20 | import KaFooter from "@/ka/KaFooter"; |
| 20 | 21 | import "@/ka/tokens.css"; |
@@ -73,6 +74,8 @@ export const viewport: Viewport = { | ||
| 73 | 74 | themeColor: "#f5f3ee", |
| 74 | 75 | width: "device-width", |
| 75 | 76 | initialScale: 1, |
| 77 | + // Indispensable pour que env(safe-area-inset-*) soit non nul sur iPhone. | |
| 78 | + viewportFit: "cover", | |
| 76 | 79 | }; |
| 77 | 80 | |
| 78 | 81 | const NAV_LINKS = [ |
@@ -96,7 +99,7 @@ export default function RootLayout({ | ||
| 96 | 99 | return ( |
| 97 | 100 | <html lang="fr"> |
| 98 | 101 | <body |
| 99 | − className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrains.variable} ${fraunces.variable} flex min-h-screen flex-col bg-paper font-body text-ink antialiased`} | |
| 102 | + className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrains.variable} ${fraunces.variable} flex min-h-dvh flex-col bg-paper font-body text-ink antialiased`} | |
| 100 | 103 | > |
| 101 | 104 | <a |
| 102 | 105 | href="#contenu" |
@@ -108,7 +111,11 @@ export default function RootLayout({ | ||
| 108 | 111 | <header className="sticky top-0 z-40 border-b-[1.5px] border-[var(--line-strong)] bg-paper md:bg-[var(--paper-glass)] md:backdrop-blur-xl"> |
| 109 | 112 | <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3 px-4 sm:px-6"> |
| 110 | 113 | <div className="flex min-w-0 items-center gap-3"> |
| 111 | − <Link href="/" className="group rounded-sm" aria-label="Trouve-KA — accueil"> | |
| 114 | + <Link | |
| 115 | + href="/" | |
| 116 | + className="group relative rounded-sm after:absolute after:-inset-2 after:content-['']" | |
| 117 | + aria-label="Trouve-KA — accueil" | |
| 118 | + > | |
| 112 | 119 | <Wordmark /> |
| 113 | 120 | </Link> |
| 114 | 121 | <span className="hidden sm:inline-flex"> |
@@ -130,6 +137,9 @@ export default function RootLayout({ | ||
| 130 | 137 | <li> |
| 131 | 138 | <AuthButton /> |
| 132 | 139 | </li> |
| 140 | + <li className="md:hidden"> | |
| 141 | + <MobileNav links={NAV_LINKS} /> | |
| 142 | + </li> | |
| 133 | 143 | </ul> |
| 134 | 144 | </nav> |
| 135 | 145 | </div> |
added
apps/web/components/mobile-nav.tsx
+126 −0
@@ -0,0 +1,126 @@ | ||
| 1 | +/** | |
| 2 | + * Trouve-KA — navigation mobile (hamburger + panneau déroulant sous le header) | |
| 3 | + * Author: Simon-Pierre Boucher | |
| 4 | + * Contact: contact@spboucher.ai | |
| 5 | + * | |
| 6 | + * Socle mobile Groupe KA (ka/tokens.css) : | |
| 7 | + * · bouton 44×44 (var(--touch)), visible uniquement < 768 px (md:hidden) ; | |
| 8 | + * · panneau `absolute top-full` (le header sticky est l'ancêtre positionné — | |
| 9 | + * JAMAIS de position:fixed sous le backdrop-blur du header) ; | |
| 10 | + * · verrou de scroll via la classe ka-scroll-lock sur <html> ; | |
| 11 | + * · fermeture : tap extérieur, Escape (focus rendu au bouton), navigation ; | |
| 12 | + * · items ≥ 44 px de haut, safe-area iPhone en bas du panneau ; | |
| 13 | + * · z-index : échelle --z-* des tokens (900 = --z-modal). | |
| 14 | + */ | |
| 15 | + | |
| 16 | +"use client"; | |
| 17 | + | |
| 18 | +import { useEffect, useRef, useState } from "react"; | |
| 19 | +import Link from "next/link"; | |
| 20 | +import { usePathname } from "next/navigation"; | |
| 21 | + | |
| 22 | +interface MobileNavProps { | |
| 23 | + links: ReadonlyArray<{ href: string; label: string }>; | |
| 24 | +} | |
| 25 | + | |
| 26 | +export function MobileNav({ links }: MobileNavProps) { | |
| 27 | + const [open, setOpen] = useState(false); | |
| 28 | + const rootRef = useRef<HTMLDivElement>(null); | |
| 29 | + const buttonRef = useRef<HTMLButtonElement>(null); | |
| 30 | + const pathname = usePathname(); | |
| 31 | + | |
| 32 | + // Fermeture à la navigation (le lien tapé a déjà déclenché le routage). | |
| 33 | + useEffect(() => { | |
| 34 | + setOpen(false); | |
| 35 | + }, [pathname]); | |
| 36 | + | |
| 37 | + // Panneau ouvert : verrou de scroll + Escape + tap extérieur. | |
| 38 | + useEffect(() => { | |
| 39 | + if (!open) return; | |
| 40 | + document.documentElement.classList.add("ka-scroll-lock"); | |
| 41 | + | |
| 42 | + const onKeyDown = (event: KeyboardEvent) => { | |
| 43 | + if (event.key === "Escape") { | |
| 44 | + setOpen(false); | |
| 45 | + buttonRef.current?.focus(); | |
| 46 | + } | |
| 47 | + }; | |
| 48 | + const onPointerDown = (event: PointerEvent) => { | |
| 49 | + if (rootRef.current && !rootRef.current.contains(event.target as Node)) { | |
| 50 | + setOpen(false); | |
| 51 | + } | |
| 52 | + }; | |
| 53 | + | |
| 54 | + document.addEventListener("keydown", onKeyDown); | |
| 55 | + document.addEventListener("pointerdown", onPointerDown); | |
| 56 | + return () => { | |
| 57 | + document.documentElement.classList.remove("ka-scroll-lock"); | |
| 58 | + document.removeEventListener("keydown", onKeyDown); | |
| 59 | + document.removeEventListener("pointerdown", onPointerDown); | |
| 60 | + }; | |
| 61 | + }, [open]); | |
| 62 | + | |
| 63 | + return ( | |
| 64 | + <div ref={rootRef} className="md:hidden"> | |
| 65 | + <button | |
| 66 | + ref={buttonRef} | |
| 67 | + type="button" | |
| 68 | + aria-expanded={open} | |
| 69 | + aria-controls="menu-mobile" | |
| 70 | + aria-label={open ? "Fermer le menu" : "Ouvrir le menu"} | |
| 71 | + onClick={() => setOpen((v) => !v)} | |
| 72 | + className="flex h-11 w-11 items-center justify-center rounded-ctl border-[1.5px] border-transparent text-ink transition-colors hover:border-ink" | |
| 73 | + > | |
| 74 | + {open ? ( | |
| 75 | + <svg | |
| 76 | + width="20" | |
| 77 | + height="20" | |
| 78 | + viewBox="0 0 20 20" | |
| 79 | + fill="none" | |
| 80 | + stroke="currentColor" | |
| 81 | + strokeWidth="2" | |
| 82 | + strokeLinecap="round" | |
| 83 | + aria-hidden="true" | |
| 84 | + > | |
| 85 | + <path d="M4 4l12 12M16 4L4 16" /> | |
| 86 | + </svg> | |
| 87 | + ) : ( | |
| 88 | + <svg | |
| 89 | + width="20" | |
| 90 | + height="20" | |
| 91 | + viewBox="0 0 20 20" | |
| 92 | + fill="none" | |
| 93 | + stroke="currentColor" | |
| 94 | + strokeWidth="2" | |
| 95 | + strokeLinecap="round" | |
| 96 | + aria-hidden="true" | |
| 97 | + > | |
| 98 | + <path d="M3 5h14M3 10h14M3 15h14" /> | |
| 99 | + </svg> | |
| 100 | + )} | |
| 101 | + </button> | |
| 102 | + | |
| 103 | + {open && ( | |
| 104 | + <div | |
| 105 | + id="menu-mobile" | |
| 106 | + className="absolute inset-x-0 top-full z-[900] border-b-[1.5px] border-[var(--line-strong)] bg-paper shadow-off-soft" | |
| 107 | + style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }} | |
| 108 | + > | |
| 109 | + <ul className="px-4 py-2 sm:px-6"> | |
| 110 | + {links.map((link) => ( | |
| 111 | + <li key={link.href}> | |
| 112 | + <Link | |
| 113 | + href={link.href} | |
| 114 | + onClick={() => setOpen(false)} | |
| 115 | + className="gk-display flex min-h-[44px] items-center rounded-ctl px-3 text-[15px] font-bold text-ink-2 transition-colors hover:bg-surface hover:text-ink" | |
| 116 | + > | |
| 117 | + {link.label} | |
| 118 | + </Link> | |
| 119 | + </li> | |
| 120 | + ))} | |
| 121 | + </ul> | |
| 122 | + </div> | |
| 123 | + )} | |
| 124 | + </div> | |
| 125 | + ); | |
| 126 | +} | |
modified
apps/web/ka/tokens.css
+87 −0
@@ -69,7 +69,24 @@ | ||
| 69 | 69 | |
| 70 | 70 | /* Cible tactile minimale */ |
| 71 | 71 | --touch: 44px; |
| 72 | + | |
| 73 | + /* ---- Échelle z-index COMMUNE (obligatoire — aucune valeur arbitraire) ---- | |
| 74 | + grain de film body::before = 9999 (pointer-events:none, toujours au-dessus, | |
| 75 | + purement visuel). Tout composant interactif se place sous 9999 : */ | |
| 76 | + --z-content: 1; /* contenu positionné ordinaire */ | |
| 77 | + --z-sticky: 300; /* éléments sticky de contenu (sous-nav…) */ | |
| 78 | + --z-header: 500; /* header du site */ | |
| 79 | + --z-bottombar: 600; /* tab bar / barre d'action basse */ | |
| 80 | + --z-dropdown: 700; /* menus déroulants (au-dessus des barres) */ | |
| 81 | + --z-overlay: 800; /* voile sous modale/panneau */ | |
| 82 | + --z-modal: 900; /* modales, panneaux de filtres, galeries */ | |
| 83 | + --z-toast: 950; /* notifications */ | |
| 84 | + | |
| 85 | + /* ---- Hauteur de viewport DYNAMIQUE (barre du navigateur mobile qui se | |
| 86 | + replie au scroll) : toujours var(--vh100), JAMAIS 100vh en dur. ---- */ | |
| 87 | + --vh100: 100vh; | |
| 72 | 88 | } |
| 89 | +@supports (height: 100dvh) { :root { --vh100: 100dvh; } } | |
| 73 | 90 | |
| 74 | 91 | /* ---- Socle ---- */ |
| 75 | 92 | * { box-sizing: border-box; } |
@@ -227,3 +244,73 @@ body > * { position: relative; } | ||
| 227 | 244 | /* ---- Utilitaires responsive ---- */ |
| 228 | 245 | .only-mobile { display: initial; } .only-desktop { display: none; } |
| 229 | 246 | @media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } } |
| 247 | + | |
| 248 | +/* ============================================================================= | |
| 249 | + SOCLE MOBILE OBLIGATOIRE (2026-08-19) — règles communes aux 13 sites. | |
| 250 | + RÈGLES pour tout composant futur : | |
| 251 | + · TAP, jamais :hover, pour ouvrir un menu (le survol n'existe pas au doigt) ; | |
| 252 | + le :hover ne sert qu'aux effets décoratifs, sous @media (hover: hover). | |
| 253 | + · var(--vh100) (dvh) et JAMAIS 100vh pour tout élément calé sur le viewport. | |
| 254 | + · position:fixed exige qu'AUCUN ancêtre n'ait transform/filter/perspective/ | |
| 255 | + will-change/backdrop-filter — sinon monter l'élément à la racine (body). | |
| 256 | + · Barre basse fixe = .ka-bottombar + classe has-bottombar sur <body>. | |
| 257 | + · Menu/panneau ouvert = .ka-scroll-lock sur <html> (scroll arrière-plan gelé). | |
| 258 | + · z-index : uniquement l'échelle --z-* ci-dessus. | |
| 259 | + · Zones tactiles ≥ var(--touch) (44 px), champs ≥ 16 px (zoom iOS). | |
| 260 | + ========================================================================== */ | |
| 261 | + | |
| 262 | +/* Anti-zoom iOS : au doigt, aucun champ sous 16 px (le focus d'un champ <16 px | |
| 263 | + déclenche un zoom automatique de page sur Safari iOS). !important assumé : | |
| 264 | + c'est un filet d'accessibilité, un champ plus petit casse le zoom quoi | |
| 265 | + qu'il arrive — ne s'applique qu'aux écrans tactiles. */ | |
| 266 | +@media (hover: none) and (pointer: coarse) { | |
| 267 | + input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), | |
| 268 | + select, textarea { font-size: max(16px, 1em) !important; } | |
| 269 | +} | |
| 270 | + | |
| 271 | +/* Zone tactile du badge Groupe KA étendue à ≥44 px au doigt, sans changer | |
| 272 | + son rendu (débord de la zone cliquable via pseudo-élément). */ | |
| 273 | +@media (pointer: coarse) { | |
| 274 | + .gk-badge { position: relative; } | |
| 275 | + .gk-badge::after { content: ""; position: absolute; inset: -8px; } | |
| 276 | +} | |
| 277 | + | |
| 278 | +/* Hauteurs viewport dynamiques */ | |
| 279 | +.h-viewport { height: 100vh; height: 100dvh; } | |
| 280 | +.min-h-viewport { min-height: 100vh; min-height: 100dvh; } | |
| 281 | + | |
| 282 | +/* Barre fixe basse fiable : safe-area iPhone incluse, immunisée contre les | |
| 283 | + transforms accidentels, et compensation d'espace via body.has-bottombar. */ | |
| 284 | +.ka-bottombar { | |
| 285 | + position: fixed; left: 0; right: 0; bottom: 0; | |
| 286 | + z-index: var(--z-bottombar); | |
| 287 | + padding-bottom: env(safe-area-inset-bottom, 0px); | |
| 288 | + background: var(--surface); | |
| 289 | + border-top: 1.5px solid var(--ink); | |
| 290 | + transform: none !important; filter: none !important; | |
| 291 | +} | |
| 292 | +body.has-bottombar { padding-bottom: calc(var(--bottombar-h, 64px) + env(safe-area-inset-bottom, 0px)); } | |
| 293 | + | |
| 294 | +/* Verrou de scroll d'arrière-plan (menu mobile, modale, panneau de filtres | |
| 295 | + ouverts) : ajouter/retirer .ka-scroll-lock sur <html>. */ | |
| 296 | +html.ka-scroll-lock, html.ka-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; } | |
| 297 | + | |
| 298 | +/* Menu déroulant de référence : au-dessus de tout contenu (cartes Mapbox | |
| 299 | + incluses), défilement interne avec élan, jamais plus haut que l'écran. */ | |
| 300 | +.ka-menu { | |
| 301 | + position: absolute; z-index: var(--z-dropdown); | |
| 302 | + min-width: 180px; | |
| 303 | + max-height: min(60vh, 420px); max-height: min(60dvh, 420px); | |
| 304 | + overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; | |
| 305 | + background: var(--surface); border: 1.5px solid var(--ink); | |
| 306 | + border-radius: var(--r-card); box-shadow: var(--shadow-off-mid); | |
| 307 | +} | |
| 308 | +.ka-menu a, .ka-menu button, .ka-menu label, .ka-menu [role="menuitem"], .ka-menu [role="option"] { | |
| 309 | + display: flex; align-items: center; min-height: var(--touch); | |
| 310 | + padding: 10px 14px; width: 100%; text-decoration: none; | |
| 311 | +} | |
| 312 | +/* Voile plein écran sous une modale / un panneau */ | |
| 313 | +.ka-overlay { | |
| 314 | + position: fixed; inset: 0; z-index: var(--z-overlay); | |
| 315 | + background: rgba(20, 24, 20, 0.45); | |
| 316 | +} | |
modified
apps/web/public/ka-agent.js
+25 −7
@@ -17,18 +17,19 @@ | ||
| 17 | 17 | |
| 18 | 18 | /* ---------- styles ---------- */ |
| 19 | 19 | var css = ` |
| 20 | − .kaa-btn{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:58px;height:58px; | |
| 20 | + .kaa-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:58px;height:58px; | |
| 21 | 21 | border-radius:50%;border:2px solid var(--ink,#141814);background:var(--accent,#d9f26b); |
| 22 | 22 | color:var(--on-accent,#141814);font:700 17px/1 "Space Grotesk",system-ui,sans-serif; |
| 23 | 23 | cursor:pointer;box-shadow:4px 4px 0 rgba(20,24,20,.85);display:flex;align-items:center; |
| 24 | − justify-content:center;transition:transform .15s;padding-bottom:env(safe-area-inset-bottom,0)} | |
| 24 | + justify-content:center;transition:transform .15s} | |
| 25 | 25 | .kaa-btn:hover{transform:translate(-2px,-2px)} |
| 26 | − .kaa-panel{position:fixed;right:16px;bottom:86px;z-index:2147483001;width:min(392px,calc(100vw - 24px)); | |
| 27 | − height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee); | |
| 26 | + .kaa-panel{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:2147483001;width:min(392px,calc(100vw - 24px)); | |
| 27 | + height:min(580px,calc(100vh - 110px));height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee); | |
| 28 | 28 | border:2px solid var(--ink,#141814);border-radius:14px;box-shadow:8px 8px 0 rgba(20,24,20,.85); |
| 29 | 29 | overflow:hidden;font-family:Inter,system-ui,sans-serif} |
| 30 | 30 | .kaa-panel.kaa-open{display:flex} |
| 31 | − .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none} | |
| 31 | + .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none} | |
| 32 | + html.kaa-lock,html.kaa-lock body{overflow:hidden!important;overscroll-behavior:none} | |
| 32 | 33 | .kaa-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ink,#141814); |
| 33 | 34 | color:var(--paper,#f5f3ee);flex:none} |
| 34 | 35 | .kaa-head b{font:700 15px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em} |
@@ -53,7 +54,7 @@ | ||
| 53 | 54 | border-radius:999px;background:var(--surface-2,#faf9f5)} |
| 54 | 55 | .kaa-in{display:flex;gap:8px;padding:11px;border-top:2px solid var(--ink,#141814);background:#fff;flex:none; |
| 55 | 56 | padding-bottom:calc(11px + env(safe-area-inset-bottom,0))} |
| 56 | − .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:11px 12px;font:13.5px/1.4 Inter,system-ui,sans-serif; | |
| 57 | + .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:10px 12px;font:16px/1.4 Inter,system-ui,sans-serif; | |
| 57 | 58 | border:1.5px solid var(--ink,#141814);border-radius:9px;background:var(--paper,#f5f3ee);outline:none} |
| 58 | 59 | .kaa-in button{min-width:52px;min-height:44px;border:1.5px solid var(--ink,#141814);border-radius:9px; |
| 59 | 60 | background:var(--ink,#141814);color:var(--accent,#d9f26b);font:700 16px "Space Grotesk",system-ui;cursor:pointer} |
@@ -142,15 +143,32 @@ | ||
| 142 | 143 | } |
| 143 | 144 | |
| 144 | 145 | /* ---------- ouverture / plein écran ---------- */ |
| 146 | + /* Sur téléphone : panneau plein écran d'office + scroll d'arrière-plan | |
| 147 | + verrouillé tant qu'il est ouvert (html.kaa-lock). Pas de focus clavier | |
| 148 | + forcé au tap (le clavier ne s'ouvre que si l'utilisateur touche le champ). */ | |
| 149 | + var mobileMq = window.matchMedia("(max-width: 640px)"); | |
| 150 | + var fineInput = window.matchMedia("(hover: hover) and (pointer: fine)"); | |
| 151 | + function syncLock() { | |
| 152 | + var open = panel.classList.contains("kaa-open"); | |
| 153 | + if (open && mobileMq.matches) panel.classList.add("kaa-full"); | |
| 154 | + document.documentElement.classList.toggle( | |
| 155 | + "kaa-lock", open && panel.classList.contains("kaa-full")); | |
| 156 | + } | |
| 145 | 157 | btn.addEventListener("click", function () { |
| 146 | 158 | panel.classList.toggle("kaa-open"); |
| 147 | − if (panel.classList.contains("kaa-open")) { render(); ta.focus(); } | |
| 159 | + if (panel.classList.contains("kaa-open")) { | |
| 160 | + render(); | |
| 161 | + if (fineInput.matches) ta.focus(); | |
| 162 | + } | |
| 163 | + syncLock(); | |
| 148 | 164 | }); |
| 149 | 165 | panel.querySelector(".kaa-x2").addEventListener("click", function () { |
| 150 | 166 | panel.classList.remove("kaa-open", "kaa-full"); |
| 167 | + syncLock(); | |
| 151 | 168 | }); |
| 152 | 169 | panel.querySelector(".kaa-x1").addEventListener("click", function () { |
| 153 | 170 | panel.classList.toggle("kaa-full"); |
| 171 | + syncLock(); | |
| 154 | 172 | scroll(); |
| 155 | 173 | }); |
| 156 | 174 | |
modified
apps/web/tailwind.config.ts
+1 −0
@@ -15,6 +15,7 @@ const config: Config = { | ||
| 15 | 15 | "./app/**/*.{ts,tsx}", |
| 16 | 16 | "./components/**/*.{ts,tsx}", |
| 17 | 17 | "./lib/**/*.{ts,tsx}", |
| 18 | + "./ka/**/*.{ts,tsx}", | |
| 18 | 19 | ], |
| 19 | 20 | theme: { |
| 20 | 21 | extend: { |
| 21 | 22 | |