diff --git a/app/components/Admin/LocationCombobox.tsx b/app/components/Admin/LocationCombobox.tsx
new file mode 100644
index 00000000..a475b0bd
--- /dev/null
+++ b/app/components/Admin/LocationCombobox.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Check, ChevronsUpDown, MapPin } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "~/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
+import { cn } from "~/lib/utils";
+
+export type LocationOption = {
+  id: number | string;
+  name: string;
+  city?: string;
+};
+
+type Props = {
+  options: LocationOption[];
+  value: number | string | null;
+  onChange: (id: number | string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+export function LocationCombobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecione um ponto de contagem...",
+  disabled,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => String(o.id) === String(value));
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="w-full justify-between font-normal"
+        >
+          {selected ? (
+            <span className="flex items-center gap-2 truncate">
+              <MapPin className="size-4 text-muted-foreground shrink-0" />
+              <span className="truncate">{selected.name}</span>
+              {selected.city && (
+                <span className="text-xs text-muted-foreground">— {selected.city}</span>
+              )}
+            </span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <ChevronsUpDown className="size-4 opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]" align="start">
+        <Command>
+          <CommandInput placeholder="Buscar ponto..." />
+          <CommandList>
+            <CommandEmpty>Nenhum ponto encontrado.</CommandEmpty>
+            <CommandGroup>
+              {options.map((opt) => {
+                const isSelected = String(opt.id) === String(value);
+                return (
+                  <CommandItem
+                    key={opt.id}
+                    value={`${opt.name} ${opt.city ?? ""}`}
+                    onSelect={() => {
+                      onChange(isSelected ? null : opt.id);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check className={cn("size-4", isSelected ? "opacity-100" : "opacity-0")} />
+                    <div className="flex flex-col min-w-0">
+                      <span className="truncate">{opt.name}</span>
+                      {opt.city && (
+                        <span className="text-xs text-muted-foreground truncate">{opt.city}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/app/components/Admin/NovaContagemForm.tsx b/app/components/Admin/NovaContagemForm.tsx
new file mode 100644
index 00000000..9a8c6514
--- /dev/null
+++ b/app/components/Admin/NovaContagemForm.tsx
@@ -0,0 +1,636 @@
+import { useState, useMemo, useEffect } from "react";
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft, Save, Info } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "~/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import { Badge } from "~/components/ui/badge";
+import {
+  LocationCombobox,
+  type LocationOption,
+} from "~/components/Admin/LocationCombobox";
+import { TopologyPicker } from "~/components/Admin/topology/TopologyPicker";
+import { TopologyDiagram } from "~/components/Admin/topology/TopologyDiagram";
+import { MovementMatrix } from "~/components/Admin/topology/MovementMatrix";
+import {
+  TOPOLOGY_DIRECTIONS,
+  emptyMovements,
+  totalCyclists,
+  type Movements,
+  type Topology,
+} from "~/components/Admin/topology/types";
+import { cn } from "~/lib/utils";
+
+type Characteristics = {
+  women: string;
+  juveniles: string;
+  ride: string;
+  helmet: string;
+  service: string;
+  cargo: string;
+  shared_bike: string;
+  sidewalk: string;
+  wrong_way: string;
+  motor: string;
+  rain: string;
+  other_active_modes: string;
+  other_behaviors: string;
+  others: string;
+};
+
+const CHARACTERISTICS_FIELDS: Array<{
+  key: keyof Characteristics;
+  label: string;
+  group: "perfil" | "comportamento" | "modal" | "ambiente";
+}> = [
+  { key: "women", label: "Mulheres", group: "perfil" },
+  { key: "juveniles", label: "Crianças e adolescentes", group: "perfil" },
+  { key: "ride", label: "Carona", group: "perfil" },
+  { key: "helmet", label: "Capacete", group: "comportamento" },
+  { key: "wrong_way", label: "Contramão", group: "comportamento" },
+  { key: "sidewalk", label: "Calçada", group: "comportamento" },
+  { key: "service", label: "Serviço", group: "modal" },
+  { key: "cargo", label: "Cargueira", group: "modal" },
+  { key: "shared_bike", label: "Compartilhada", group: "modal" },
+  { key: "motor", label: "Motor / elétrica", group: "modal" },
+  { key: "other_active_modes", label: "Outros modos ativos", group: "modal" },
+  { key: "rain", label: "Sob chuva", group: "ambiente" },
+  { key: "other_behaviors", label: "Outros comportamentos", group: "comportamento" },
+  { key: "others", label: "Outros", group: "ambiente" },
+];
+
+const GROUP_LABELS: Record<string, string> = {
+  perfil: "Perfil",
+  comportamento: "Comportamento",
+  modal: "Tipo de bicicleta",
+  ambiente: "Ambiente / outros",
+};
+
+type LocationMode = "existing" | "new";
+
+type FormState = {
+  locationMode: LocationMode;
+  existingLocationId: number | string | null;
+  locationName: string;
+  topology: Topology;
+  approaches: string[];
+  movements: Movements;
+  date: string;
+  start_time: string;
+  end_time: string;
+  max_hour_cyclists: string;
+  weather_conditions: string;
+  notes: string;
+  characteristics: Characteristics;
+};
+
+const EMPTY_CHARACTERISTICS: Characteristics = {
+  women: "",
+  juveniles: "",
+  ride: "",
+  helmet: "",
+  service: "",
+  cargo: "",
+  shared_bike: "",
+  sidewalk: "",
+  wrong_way: "",
+  motor: "",
+  rain: "",
+  other_active_modes: "",
+  other_behaviors: "",
+  others: "",
+};
+
+function initialState(): FormState {
+  const topology: Topology = "crossroad";
+  const approachCount = TOPOLOGY_DIRECTIONS[topology].length;
+  return {
+    locationMode: "existing",
+    existingLocationId: null,
+    locationName: "",
+    topology,
+    approaches: Array.from({ length: approachCount }, () => ""),
+    movements: emptyMovements(approachCount),
+    date: "",
+    start_time: "",
+    end_time: "",
+    max_hour_cyclists: "",
+    weather_conditions: "",
+    notes: "",
+    characteristics: EMPTY_CHARACTERISTICS,
+  };
+}
+
+function toIntOrZero(s: string): number {
+  const n = Number(s);
+  return Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0;
+}
+
+export function NovaContagemForm({ locations }: { locations: LocationOption[] }) {
+  const [form, setForm] = useState<FormState>(initialState);
+  const [submitted, setSubmitted] = useState(false);
+
+  // Keep approaches/movements arrays in sync when topology changes.
+  useEffect(() => {
+    const target = TOPOLOGY_DIRECTIONS[form.topology].length;
+    if (form.approaches.length === target) return;
+    setForm((s) => {
+      const approaches = Array.from(
+        { length: target },
+        (_, i) => s.approaches[i] ?? "",
+      );
+      return { ...s, approaches, movements: emptyMovements(target) };
+    });
+  }, [form.topology, form.approaches.length]);
+
+  const total = totalCyclists(form.movements);
+  const charsSum = useMemo(
+    () =>
+      (Object.keys(form.characteristics) as Array<keyof Characteristics>).reduce(
+        (acc, k) => acc + toIntOrZero(form.characteristics[k]),
+        0,
+      ),
+    [form.characteristics],
+  );
+
+  const errors = useMemo(() => {
+    const e: Partial<Record<string, string>> = {};
+    if (!form.locationName.trim()) e.locationName = "Informe um nome para o ponto.";
+    if (form.locationMode === "existing" && form.existingLocationId == null) {
+      e.existingLocationId = "Selecione um ponto da lista.";
+    }
+    if (!form.date) e.date = "Informe a data.";
+    if (!form.start_time) e.start_time = "Informe o horário de início.";
+    if (!form.end_time) e.end_time = "Informe o horário de término.";
+    if (form.start_time && form.end_time && form.end_time <= form.start_time) {
+      e.end_time = "Deve ser depois do início.";
+    }
+    if (total === 0) e.movements = "A matriz precisa ter ao menos um movimento contado.";
+    return e;
+  }, [form, total]);
+
+  const hasErrors = Object.keys(errors).length > 0;
+
+  function set<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((s) => ({ ...s, [key]: value }));
+  }
+
+  function setApproach(i: number, value: string) {
+    setForm((s) => {
+      const approaches = [...s.approaches];
+      approaches[i] = value;
+      return { ...s, approaches };
+    });
+  }
+
+  function setMovement(key: string, value: string) {
+    setForm((s) => ({ ...s, movements: { ...s.movements, [key]: value } }));
+  }
+
+  function setChar(key: keyof Characteristics, value: string) {
+    setForm((s) => ({
+      ...s,
+      characteristics: { ...s.characteristics, [key]: value },
+    }));
+  }
+
+  function changeMode(mode: LocationMode) {
+    setForm((s) => ({
+      ...s,
+      locationMode: mode,
+      // Reset cross-mode fields so they don't leak between flows.
+      existingLocationId: null,
+      locationName: "",
+    }));
+  }
+
+  function selectExisting(id: number | string | null) {
+    const picked = locations.find((l) => String(l.id) === String(id));
+    setForm((s) => ({
+      ...s,
+      existingLocationId: id,
+      locationName: picked?.name ?? "",
+    }));
+  }
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setSubmitted(true);
+    if (hasErrors) {
+      toast.error("Confira os campos destacados.");
+      return;
+    }
+
+    const payload = {
+      location: {
+        mode: form.locationMode,
+        existing_id: form.existingLocationId,
+        name: form.locationName,
+        topology: form.topology,
+        approaches: form.approaches.map((a, i) => ({
+          index: i,
+          label: a,
+          direction: TOPOLOGY_DIRECTIONS[form.topology][i],
+        })),
+      },
+      session: {
+        date: form.date,
+        start_time: form.start_time,
+        end_time: form.end_time,
+      },
+      results: {
+        total_cyclists: total,
+        max_hour_cyclists: toIntOrZero(form.max_hour_cyclists),
+        movements: Object.fromEntries(
+          Object.entries(form.movements).map(([k, v]) => [k, toIntOrZero(v)]),
+        ),
+      },
+      characteristics: Object.fromEntries(
+        (Object.keys(form.characteristics) as Array<keyof Characteristics>).map(
+          (k) => [k, toIntOrZero(form.characteristics[k])],
+        ),
+      ),
+      weather_conditions: form.weather_conditions || null,
+      notes: form.notes || null,
+    };
+
+    console.info("[admin/contagens/nova] payload", payload);
+    toast.success("Contagem pronta para envio", {
+      description: "A camada de dados ainda não está conectada — payload no console.",
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
+      {/* Local */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Local</CardTitle>
+          <CardDescription>
+            Ponto onde a contagem foi realizada. Reaproveite um existente ou
+            cadastre um novo.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div role="tablist" className="inline-flex rounded-md border bg-muted/40 p-1 text-sm">
+            {(["existing", "new"] as const).map((m) => (
+              <button
+                key={m}
+                type="button"
+                role="tab"
+                aria-selected={form.locationMode === m}
+                onClick={() => changeMode(m)}
+                className={cn(
+                  "px-3 py-1.5 rounded-sm transition-colors",
+                  form.locationMode === m
+                    ? "bg-background text-foreground shadow-xs"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {m === "existing" ? "Selecionar existente" : "Novo ponto"}
+              </button>
+            ))}
+          </div>
+
+          {form.locationMode === "existing" ? (
+            <Field
+              label="Ponto de contagem"
+              htmlFor="existing-location"
+              required
+              error={submitted ? errors.existingLocationId : undefined}
+            >
+              <LocationCombobox
+                options={locations}
+                value={form.existingLocationId}
+                onChange={selectExisting}
+              />
+            </Field>
+          ) : (
+            <Field
+              label="Nome do ponto"
+              htmlFor="location-name"
+              required
+              error={submitted ? errors.locationName : undefined}
+              hint="Ex: 'Av. Caxangá com Rua Cosme Viana'"
+            >
+              <Input
+                id="location-name"
+                value={form.locationName}
+                onChange={(e) => set("locationName", e.target.value)}
+                placeholder="Cruzamento da Av. Caxangá com..."
+                required
+              />
+            </Field>
+          )}
+
+          {form.locationMode === "existing" && form.locationName && (
+            <div className="rounded-md bg-muted/40 px-3 py-2 text-sm">
+              <span className="text-muted-foreground">Selecionado: </span>
+              <span className="font-medium">{form.locationName}</span>
+            </div>
+          )}
+
+          <div>
+            <Label className="text-sm">Topologia</Label>
+            <p className="mt-1 mb-3 text-xs text-muted-foreground">
+              Define quantas aproximações o ponto possui e os movimentos possíveis.
+            </p>
+            <TopologyPicker
+              value={form.topology}
+              onChange={(t) => set("topology", t)}
+            />
+          </div>
+
+          <div className="grid gap-5 lg:grid-cols-2">
+            <div className="space-y-3">
+              <Label className="text-sm">Aproximações</Label>
+              <p className="text-xs text-muted-foreground">
+                Nomeie cada perna do {form.topology === "point" ? "trecho" : "cruzamento"}.
+                Os nomes aparecem no diagrama e nos cabeçalhos da matriz.
+              </p>
+              <div className="space-y-2">
+                {form.approaches.map((label, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <span className="inline-flex size-6 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums">
+                      {idx + 1}
+                    </span>
+                    <Input
+                      value={label}
+                      onChange={(e) => setApproach(idx, e.target.value)}
+                      placeholder={`Aproximação ${idx + 1}`}
+                      aria-label={`Nome da aproximação ${idx + 1}`}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <TopologyDiagram
+              topology={form.topology}
+              approaches={form.approaches}
+              movements={form.movements}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Sessão */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Sessão de contagem</CardTitle>
+          <CardDescription>Quando a contagem foi feita.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-3">
+          <Field label="Data" htmlFor="date" required error={submitted ? errors.date : undefined}>
+            <Input
+              id="date"
+              type="date"
+              value={form.date}
+              onChange={(e) => set("date", e.target.value)}
+              required
+            />
+          </Field>
+          <Field
+            label="Início"
+            htmlFor="start_time"
+            required
+            error={submitted ? errors.start_time : undefined}
+          >
+            <Input
+              id="start_time"
+              type="time"
+              value={form.start_time}
+              onChange={(e) => set("start_time", e.target.value)}
+              required
+            />
+          </Field>
+          <Field
+            label="Término"
+            htmlFor="end_time"
+            required
+            error={submitted ? errors.end_time : undefined}
+          >
+            <Input
+              id="end_time"
+              type="time"
+              value={form.end_time}
+              onChange={(e) => set("end_time", e.target.value)}
+              required
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      {/* Resultados */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Resultados</CardTitle>
+          <CardDescription>
+            Movimentos contados de cada aproximação para as demais (sem retorno
+            na mesma perna). O total é calculado automaticamente.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <MovementMatrix
+            approaches={form.approaches}
+            movements={form.movements}
+            onChange={setMovement}
+          />
+          {submitted && errors.movements && (
+            <p className="text-xs text-destructive">{errors.movements}</p>
+          )}
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="rounded-md border bg-muted/40 px-4 py-3 flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Total de ciclistas</span>
+              <Badge className="text-base font-semibold tabular-nums" variant="secondary">
+                {total.toLocaleString("pt-BR")}
+              </Badge>
+            </div>
+            <Field
+              label="Pico em 1 hora"
+              htmlFor="max_hour_cyclists"
+              hint="Maior contagem observada em uma janela de 60 min."
+            >
+              <Input
+                id="max_hour_cyclists"
+                type="number"
+                inputMode="numeric"
+                min={0}
+                step={1}
+                value={form.max_hour_cyclists}
+                onChange={(e) => set("max_hour_cyclists", e.target.value)}
+              />
+            </Field>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Características */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Características</CardTitle>
+          <CardDescription className="flex items-start gap-2">
+            <Info className="size-4 shrink-0 mt-0.5" />
+            <span>
+              Cada característica é a contagem de ciclistas observados naquele
+              perfil/comportamento. Não precisam somar exatamente o total —
+              uma mesma pessoa pode entrar em várias categorias.
+            </span>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {(["perfil", "comportamento", "modal", "ambiente"] as const).map((group) => (
+            <div key={group} className="space-y-3">
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                {GROUP_LABELS[group]}
+              </h3>
+              <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
+                {CHARACTERISTICS_FIELDS.filter((f) => f.group === group).map((f) => (
+                  <Field key={f.key} label={f.label} htmlFor={`char-${f.key}`}>
+                    <Input
+                      id={`char-${f.key}`}
+                      type="number"
+                      inputMode="numeric"
+                      min={0}
+                      step={1}
+                      placeholder="0"
+                      value={form.characteristics[f.key]}
+                      onChange={(e) => setChar(f.key, e.target.value)}
+                    />
+                  </Field>
+                ))}
+              </div>
+            </div>
+          ))}
+
+          <div className="flex items-center justify-between rounded-md border bg-muted/40 px-4 py-3 text-sm">
+            <span className="text-muted-foreground">Soma das características vs. total</span>
+            <span className="flex items-center gap-2">
+              <Badge variant="secondary" className="tabular-nums">
+                {charsSum.toLocaleString("pt-BR")} / {total.toLocaleString("pt-BR")}
+              </Badge>
+              {total > 0 && charsSum > total && (
+                <span className="text-xs text-amber-700">
+                  Soma maior que o total — confira se é esperado.
+                </span>
+              )}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Observações */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Observações</CardTitle>
+          <CardDescription>Contexto opcional sobre a contagem.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-2">
+          <Field
+            label="Condição climática"
+            htmlFor="weather_conditions"
+            hint="Ex: ensolarado, garoa, vento forte..."
+          >
+            <Input
+              id="weather_conditions"
+              value={form.weather_conditions}
+              onChange={(e) => set("weather_conditions", e.target.value)}
+              placeholder="Ensolarado, ~28 °C"
+            />
+          </Field>
+          <Field label="Notas" htmlFor="notes" hint="Eventos, obras, particularidades...">
+            <Textarea
+              id="notes"
+              rows={3}
+              value={form.notes}
+              onChange={(e) => set("notes", e.target.value)}
+              placeholder="Obra na via lateral durante a contagem..."
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-wrap items-center justify-between gap-3 pt-2">
+        <Button asChild type="button" variant="ghost">
+          <Link to="/admin/contagens">
+            <ArrowLeft className="size-4" />
+            Voltar
+          </Link>
+        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setForm(initialState());
+              setSubmitted(false);
+            }}
+          >
+            Limpar
+          </Button>
+          <Button type="submit">
+            <Save className="size-4" />
+            Salvar contagem
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  htmlFor,
+  required,
+  error,
+  hint,
+  children,
+}: {
+  label: string;
+  htmlFor: string;
+  required?: boolean;
+  error?: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  const describedBy = [hint && `${htmlFor}-hint`, error && `${htmlFor}-error`]
+    .filter(Boolean)
+    .join(" ") || undefined;
+
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={htmlFor} className="text-sm">
+        {label}
+        {required && <span className="text-destructive ml-0.5" aria-hidden>*</span>}
+      </Label>
+      <div
+        className={cn(
+          error && "[&_input]:border-destructive [&_input]:focus-visible:ring-destructive/30",
+        )}
+        aria-describedby={describedBy}
+      >
+        {children}
+      </div>
+      {hint && !error && (
+        <p id={`${htmlFor}-hint`} className="text-xs text-muted-foreground">
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p id={`${htmlFor}-error`} className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/Admin/topology/MovementMatrix.tsx b/app/components/Admin/topology/MovementMatrix.tsx
new file mode 100644
index 00000000..6f048ef8
--- /dev/null
+++ b/app/components/Admin/topology/MovementMatrix.tsx
@@ -0,0 +1,82 @@
+import { Input } from "~/components/ui/input";
+import { type Movements } from "./types";
+
+type Props = {
+  approaches: string[];
+  movements: Movements;
+  onChange: (key: string, value: string) => void;
+};
+
+/**
+ * Square grid of from→to flow inputs. Diagonal is greyed-out (no U-turns
+ * captured here). Headers reflect the user's approach labels.
+ */
+export function MovementMatrix({ approaches, movements, onChange }: Props) {
+  const n = approaches.length;
+  const headers = approaches.map((a, i) => a.trim() || `Aprox. ${i + 1}`);
+
+  return (
+    <div className="overflow-x-auto rounded-md border">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-muted/40">
+            <th className="text-left font-medium text-muted-foreground px-3 py-2 text-xs uppercase tracking-wide">
+              De ↓ &nbsp;/&nbsp; Para →
+            </th>
+            {headers.map((h, j) => (
+              <th
+                key={j}
+                className="font-medium text-foreground px-3 py-2 text-left whitespace-nowrap"
+                title={h}
+              >
+                {truncate(h, 20)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {headers.map((h, i) => (
+            <tr key={i} className="border-t">
+              <th
+                scope="row"
+                className="text-left font-medium px-3 py-2 align-middle whitespace-nowrap text-foreground"
+                title={h}
+              >
+                {truncate(h, 20)}
+              </th>
+              {Array.from({ length: n }).map((_, j) => {
+                if (i === j) {
+                  return (
+                    <td key={j} className="px-3 py-2 text-center text-muted-foreground/50">
+                      —
+                    </td>
+                  );
+                }
+                const key = `${i}-${j}`;
+                return (
+                  <td key={j} className="px-2 py-1.5">
+                    <Input
+                      type="number"
+                      inputMode="numeric"
+                      min={0}
+                      step={1}
+                      placeholder="0"
+                      value={movements[key] ?? ""}
+                      onChange={(e) => onChange(key, e.target.value)}
+                      className="h-8 w-24 text-right tabular-nums"
+                      aria-label={`De ${h} para ${headers[j]}`}
+                    />
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function truncate(s: string, n: number): string {
+  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
+}
diff --git a/app/components/Admin/topology/TopologyDiagram.tsx b/app/components/Admin/topology/TopologyDiagram.tsx
new file mode 100644
index 00000000..f57ae605
--- /dev/null
+++ b/app/components/Admin/topology/TopologyDiagram.tsx
@@ -0,0 +1,306 @@
+import {
+  TOPOLOGY_DIRECTIONS,
+  type Movements,
+  type Topology,
+} from "./types";
+
+type Props = {
+  topology: Topology;
+  approaches: string[];
+  movements: Movements;
+};
+
+/**
+ * Static topology illustration. Each movement (from→to) with a non-zero count
+ * is drawn as a cubic bezier whose tangents follow the leg axes, so straights
+ * are straight, right-turns curve gently, and left/U-turns swing wide. Stroke
+ * width and label scale subtly with magnitude.
+ */
+export function TopologyDiagram({ topology, approaches, movements }: Props) {
+  const dirs = TOPOLOGY_DIRECTIONS[topology];
+  const count = dirs.length;
+  const legs = LEG_GEOMETRY[topology];
+
+  return (
+    <div className="rounded-md border bg-muted/30 px-4 py-4">
+      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
+        Diagrama do {topology === "point" ? "ponto" : topology === "t_junction" ? "T" : "cruzamento"}
+      </p>
+      <div className="flex justify-center">
+        <svg
+          viewBox="0 0 320 240"
+          className="w-full max-w-md"
+          aria-label="Diagrama da topologia da contagem com fluxo"
+        >
+          <defs>
+            <marker
+              id="flow-tip"
+              viewBox="0 0 6 6"
+              refX="5.5"
+              refY="3"
+              markerWidth="5"
+              markerHeight="5"
+              orient="auto-start-reverse"
+            >
+              <path d="M 0 0 L 6 3 L 0 6 z" fill="var(--color-ameciclo)" opacity="0.85" />
+            </marker>
+          </defs>
+
+          {/* roads */}
+          <Roads topology={topology} />
+
+          {/* movement curves (only non-zero) */}
+          {Array.from({ length: count }).flatMap((_, i) =>
+            Array.from({ length: count }).map((__, j) => {
+              if (i === j) return null;
+              const value = parseFlow(movements[`${i}-${j}`]);
+              if (value === 0) return null;
+              return (
+                <FlowArrow
+                  key={`${i}-${j}`}
+                  from={legs[i]}
+                  to={legs[j]}
+                  count={value}
+                />
+              );
+            }),
+          )}
+
+          {/* approach labels */}
+          {dirs.map((_, idx) => {
+            const leg = legs[idx];
+            const label = approaches[idx]?.trim() || `Aproximação ${idx + 1}`;
+            const placeholder = !approaches[idx]?.trim();
+            return (
+              <LegLabel
+                key={idx}
+                pos={leg.label}
+                label={label}
+                placeholder={placeholder}
+              />
+            );
+          })}
+        </svg>
+      </div>
+      <p className="mt-3 text-xs text-muted-foreground text-center">
+        Cada seta vai <em>de</em> uma aproximação <em>para</em> outra. A
+        espessura e o número refletem a contagem na matriz abaixo.
+      </p>
+    </div>
+  );
+}
+
+/* ----- geometry -------------------------------------------------------- */
+
+type Pos = { x: number; y: number };
+type Vec = { x: number; y: number };
+
+type LegPos = {
+  /** Outer end where the label sits. */
+  label: Pos & {
+    align: "start" | "middle" | "end";
+    side: "top" | "right" | "bottom" | "left";
+  };
+  /** Departure point (arrow leaves the leg here). */
+  out: Pos;
+  /** Arrival point (arrow arrives the leg here). */
+  in: Pos;
+  /** Unit vector pointing inward along the leg axis (from outer end to centre). */
+  axis: Vec;
+};
+
+/** Right-hand convention: departure on the right side of the leg looking inward. */
+const LEG_GEOMETRY: Record<Topology, LegPos[]> = {
+  point: [
+    {
+      label: { x: 18, y: 120, align: "start", side: "left" },
+      out: { x: 50, y: 132 },
+      in: { x: 50, y: 108 },
+      axis: { x: 1, y: 0 },
+    },
+    {
+      label: { x: 302, y: 120, align: "end", side: "right" },
+      out: { x: 270, y: 108 },
+      in: { x: 270, y: 132 },
+      axis: { x: -1, y: 0 },
+    },
+  ],
+  t_junction: [
+    // West
+    {
+      label: { x: 18, y: 100, align: "start", side: "left" },
+      out: { x: 70, y: 112 },
+      in: { x: 70, y: 88 },
+      axis: { x: 1, y: 0 },
+    },
+    // East
+    {
+      label: { x: 302, y: 100, align: "end", side: "right" },
+      out: { x: 250, y: 88 },
+      in: { x: 250, y: 112 },
+      axis: { x: -1, y: 0 },
+    },
+    // South
+    {
+      label: { x: 160, y: 215, align: "middle", side: "bottom" },
+      out: { x: 148, y: 175 },
+      in: { x: 172, y: 175 },
+      axis: { x: 0, y: -1 },
+    },
+  ],
+  crossroad: [
+    // North
+    {
+      label: { x: 160, y: 18, align: "middle", side: "top" },
+      out: { x: 172, y: 50 },
+      in: { x: 148, y: 50 },
+      axis: { x: 0, y: 1 },
+    },
+    // East
+    {
+      label: { x: 302, y: 120, align: "end", side: "right" },
+      out: { x: 270, y: 108 },
+      in: { x: 270, y: 132 },
+      axis: { x: -1, y: 0 },
+    },
+    // South
+    {
+      label: { x: 160, y: 215, align: "middle", side: "bottom" },
+      out: { x: 148, y: 190 },
+      in: { x: 172, y: 190 },
+      axis: { x: 0, y: -1 },
+    },
+    // West
+    {
+      label: { x: 18, y: 120, align: "start", side: "left" },
+      out: { x: 50, y: 132 },
+      in: { x: 50, y: 108 },
+      axis: { x: 1, y: 0 },
+    },
+  ],
+};
+
+const TANGENT_LENGTH = 32;
+
+function parseFlow(s: string | undefined): number {
+  if (!s) return 0;
+  const n = Number(s);
+  return Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0;
+}
+
+function Roads({ topology }: { topology: Topology }) {
+  const stroke = "var(--color-foreground)";
+  const opacity = 0.07;
+  const w = 30;
+  if (topology === "point") {
+    return (
+      <line x1={20} y1={120} x2={300} y2={120} stroke={stroke} strokeWidth={w} opacity={opacity} strokeLinecap="round" />
+    );
+  }
+  if (topology === "t_junction") {
+    return (
+      <g stroke={stroke} strokeWidth={w} opacity={opacity} strokeLinecap="round">
+        <line x1={20} y1={100} x2={300} y2={100} />
+        <line x1={160} y1={100} x2={160} y2={215} />
+      </g>
+    );
+  }
+  return (
+    <g stroke={stroke} strokeWidth={w} opacity={opacity} strokeLinecap="round">
+      <line x1={20} y1={120} x2={300} y2={120} />
+      <line x1={160} y1={20} x2={160} y2={215} />
+    </g>
+  );
+}
+
+function FlowArrow({
+  from,
+  to,
+  count,
+}: {
+  from: LegPos;
+  to: LegPos;
+  count: number;
+}) {
+  const start = from.out;
+  const end = to.in;
+
+  // Cubic bezier: enter along source axis, exit along destination axis.
+  // - Tangent at start = source axis (inward, toward intersection)
+  // - Tangent at end = -dest axis (outward, away from intersection)
+  const c1: Pos = {
+    x: start.x + from.axis.x * TANGENT_LENGTH,
+    y: start.y + from.axis.y * TANGENT_LENGTH,
+  };
+  const c2: Pos = {
+    x: end.x + to.axis.x * TANGENT_LENGTH,
+    y: end.y + to.axis.y * TANGENT_LENGTH,
+  };
+
+  // Subtle width scaling: 1.0–2.6 across counts 1..1000 (log-ish).
+  const width = 1 + Math.min(1.6, Math.log10(count + 1) * 0.7);
+
+  // Label at bezier midpoint t=0.5: 0.125 P0 + 0.375 C1 + 0.375 C2 + 0.125 P3
+  const mid: Pos = {
+    x: 0.125 * start.x + 0.375 * c1.x + 0.375 * c2.x + 0.125 * end.x,
+    y: 0.125 * start.y + 0.375 * c1.y + 0.375 * c2.y + 0.125 * end.y,
+  };
+
+  return (
+    <g>
+      <path
+        d={`M ${start.x} ${start.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${end.x} ${end.y}`}
+        fill="none"
+        stroke="var(--color-ameciclo)"
+        strokeOpacity={0.7}
+        strokeWidth={width}
+        strokeLinecap="round"
+        markerEnd="url(#flow-tip)"
+      />
+      <text
+        x={mid.x}
+        y={mid.y}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fontSize={9}
+        fontWeight={600}
+        fontVariantNumeric="tabular-nums"
+        fill="var(--color-ameciclo)"
+        paintOrder="stroke"
+        stroke="var(--color-background)"
+        strokeWidth={3}
+      >
+        {count.toLocaleString("pt-BR")}
+      </text>
+    </g>
+  );
+}
+
+function LegLabel({
+  pos,
+  label,
+  placeholder,
+}: {
+  pos: LegPos["label"];
+  label: string;
+  placeholder: boolean;
+}) {
+  const labelY = pos.side === "bottom" ? pos.y : pos.y - 4;
+  return (
+    <text
+      x={pos.x}
+      y={labelY}
+      textAnchor={pos.align}
+      fontSize={11}
+      fontWeight={600}
+      fontStyle={placeholder ? "italic" : "normal"}
+      fill={placeholder ? "var(--color-muted-foreground)" : "var(--color-foreground)"}
+    >
+      {truncate(label, 24)}
+    </text>
+  );
+}
+
+function truncate(s: string, n: number): string {
+  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
+}
diff --git a/app/components/Admin/topology/TopologyPicker.tsx b/app/components/Admin/topology/TopologyPicker.tsx
new file mode 100644
index 00000000..9d6ffe29
--- /dev/null
+++ b/app/components/Admin/topology/TopologyPicker.tsx
@@ -0,0 +1,65 @@
+import { TOPOLOGY_LABELS, type Topology } from "./types";
+import { cn } from "~/lib/utils";
+
+type Props = {
+  value: Topology;
+  onChange: (t: Topology) => void;
+};
+
+export function TopologyPicker({ value, onChange }: Props) {
+  const options: Topology[] = ["point", "t_junction", "crossroad"];
+  return (
+    <div className="grid gap-3 sm:grid-cols-3">
+      {options.map((t) => {
+        const active = value === t;
+        return (
+          <button
+            key={t}
+            type="button"
+            onClick={() => onChange(t)}
+            className={cn(
+              "group flex flex-col items-center gap-2 rounded-md border bg-background p-3 text-sm transition-colors",
+              "hover:border-foreground/40 hover:bg-accent/40",
+              active && "border-foreground ring-2 ring-foreground/10 bg-accent/30",
+            )}
+            aria-pressed={active}
+          >
+            <Thumb topology={t} />
+            <span className={cn("font-medium", active ? "text-foreground" : "text-muted-foreground")}>
+              {TOPOLOGY_LABELS[t]}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {t === "point" ? "2 sentidos" : t === "t_junction" ? "3 aproximações" : "4 aproximações"}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function Thumb({ topology }: { topology: Topology }) {
+  const stroke = "currentColor";
+  const w = 64;
+  const h = 64;
+  return (
+    <svg width={w} height={h} viewBox="0 0 64 64" className="text-muted-foreground group-hover:text-foreground" aria-hidden>
+      {topology === "point" && (
+        <line x1={6} y1={32} x2={58} y2={32} stroke={stroke} strokeWidth={4} strokeLinecap="round" />
+      )}
+      {topology === "t_junction" && (
+        <>
+          <line x1={6} y1={28} x2={58} y2={28} stroke={stroke} strokeWidth={4} strokeLinecap="round" />
+          <line x1={32} y1={28} x2={32} y2={58} stroke={stroke} strokeWidth={4} strokeLinecap="round" />
+        </>
+      )}
+      {topology === "crossroad" && (
+        <>
+          <line x1={6} y1={32} x2={58} y2={32} stroke={stroke} strokeWidth={4} strokeLinecap="round" />
+          <line x1={32} y1={6} x2={32} y2={58} stroke={stroke} strokeWidth={4} strokeLinecap="round" />
+        </>
+      )}
+      <circle cx={32} cy={topology === "t_junction" ? 28 : 32} r={3.5} fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/app/components/Admin/topology/types.ts b/app/components/Admin/topology/types.ts
new file mode 100644
index 00000000..dee741d3
--- /dev/null
+++ b/app/components/Admin/topology/types.ts
@@ -0,0 +1,63 @@
+export type Topology = "point" | "t_junction" | "crossroad";
+
+export type Direction = "N" | "E" | "S" | "W";
+
+/** Fixed clockwise approach order per topology. */
+export const TOPOLOGY_DIRECTIONS: Record<Topology, Direction[]> = {
+  point: ["W", "E"],
+  t_junction: ["W", "E", "S"],
+  crossroad: ["N", "E", "S", "W"],
+};
+
+export const DIRECTION_LABELS: Record<Direction, string> = {
+  N: "Norte",
+  E: "Leste",
+  S: "Sul",
+  W: "Oeste",
+};
+
+export const TOPOLOGY_LABELS: Record<Topology, string> = {
+  point: "Ponto",
+  t_junction: "Junção em T",
+  crossroad: "Cruzamento",
+};
+
+export type Movements = Record<string, string>;
+
+/** Build "fromIdx-toIdx" → "" entries for every from ≠ to. */
+export function emptyMovements(approachCount: number): Movements {
+  const out: Movements = {};
+  for (let i = 0; i < approachCount; i++) {
+    for (let j = 0; j < approachCount; j++) {
+      if (i !== j) out[`${i}-${j}`] = "";
+    }
+  }
+  return out;
+}
+
+export function approachVolume(
+  fromIdx: number,
+  approachCount: number,
+  movements: Movements,
+): number {
+  let total = 0;
+  for (let to = 0; to < approachCount; to++) {
+    if (to === fromIdx) continue;
+    total += toIntOrZero(movements[`${fromIdx}-${to}`]);
+  }
+  return total;
+}
+
+export function totalCyclists(movements: Movements): number {
+  let total = 0;
+  for (const key of Object.keys(movements)) {
+    total += toIntOrZero(movements[key]);
+  }
+  return total;
+}
+
+function toIntOrZero(s: string | undefined): number {
+  if (!s) return 0;
+  const n = Number(s);
+  return Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0;
+}
diff --git a/app/components/ui/command.tsx b/app/components/ui/command.tsx
new file mode 100644
index 00000000..bfbb8071
--- /dev/null
+++ b/app/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
new file mode 100644
index 00000000..f9b94565
--- /dev/null
+++ b/app/components/ui/dialog.tsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+import { Button } from "~/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
new file mode 100644
index 00000000..7c8af89c
--- /dev/null
+++ b/app/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx
new file mode 100644
index 00000000..8d208754
--- /dev/null
+++ b/app/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}
diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
new file mode 100644
index 00000000..b77d6a4b
--- /dev/null
+++ b/app/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/app/components/ui/sonner.tsx b/app/components/ui/sonner.tsx
new file mode 100644
index 00000000..19f32e76
--- /dev/null
+++ b/app/components/ui/sonner.tsx
@@ -0,0 +1,35 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="light"
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
new file mode 100644
index 00000000..6a793e29
--- /dev/null
+++ b/app/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/app/routes/admin.contagens.index.tsx b/app/routes/admin.contagens.index.tsx
index f16f4812..6c993375 100644
--- a/app/routes/admin.contagens.index.tsx
+++ b/app/routes/admin.contagens.index.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { AdminTopbar } from "~/components/Admin/AdminTopbar";
 import { ContagensTable, type ContagemRow } from "~/components/Admin/ContagensTable";
@@ -35,9 +35,11 @@ function AdminContagens() {
         title="Contagens"
         description="Gestão das contagens de ciclistas registradas pela Ameciclo."
         actions={
-          <Button size="sm" disabled>
-            <Plus className="size-4" />
-            Nova contagem
+          <Button asChild size="sm">
+            <Link to="/admin/contagens/nova">
+              <Plus className="size-4" />
+              Nova contagem
+            </Link>
           </Button>
         }
       />
diff --git a/app/routes/admin.contagens.nova.tsx b/app/routes/admin.contagens.nova.tsx
new file mode 100644
index 00000000..f3ba1a5f
--- /dev/null
+++ b/app/routes/admin.contagens.nova.tsx
@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { AdminTopbar } from "~/components/Admin/AdminTopbar";
+import { NovaContagemForm } from "~/components/Admin/NovaContagemForm";
+import type { LocationOption } from "~/components/Admin/LocationCombobox";
+import { contagensQueryOptions } from "~/queries/dados.contagens";
+import {
+  RouteLoading,
+  RouteErrorBoundary,
+} from "~/components/Commom/RouteBoundaries";
+import { seo } from "~/utils/seo";
+
+export const Route = createFileRoute("/admin/contagens/nova")({
+  loader: ({ context: { queryClient } }) =>
+    queryClient.ensureQueryData(contagensQueryOptions()),
+  head: () =>
+    seo({
+      title: "Admin · Nova contagem - Ameciclo",
+      description: "Cadastrar uma nova contagem de ciclistas.",
+      pathname: "/admin/contagens/nova",
+      noindex: true,
+    }),
+  component: NovaContagem,
+  pendingComponent: () => <RouteLoading label="Carregando formulário..." />,
+  pendingMs: 500,
+  pendingMinMs: 800,
+  errorComponent: RouteErrorBoundary,
+});
+
+function NovaContagem() {
+  const { data: { amecicloData } } = useSuspenseQuery(contagensQueryOptions());
+
+  // Atlas response shape isn't strictly typed at the query layer yet, so we
+  // narrow defensively here. See queries/dados.contagens.ts for context.
+  const locations: LocationOption[] = Array.isArray(amecicloData)
+    ? (amecicloData as Array<{ id: number | string; name: string; city?: string }>)
+        .map((loc) => ({ id: loc.id, name: loc.name, city: loc.city }))
+        .filter((l) => l.id != null && l.name)
+        .sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+
+  return (
+    <>
+      <AdminTopbar
+        title="Nova contagem"
+        description="Cadastre uma contagem de ciclistas em um ponto existente."
+      />
+      <div className="flex-1 px-6 py-6">
+        <NovaContagemForm locations={locations} />
+      </div>
+    </>
+  );
+}
diff --git a/app/routes/admin.route.tsx b/app/routes/admin.route.tsx
index 66863e7c..c9ef7907 100644
--- a/app/routes/admin.route.tsx
+++ b/app/routes/admin.route.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { AdminSidebar } from "~/components/Admin/AdminSidebar";
+import { Toaster } from "~/components/ui/sonner";
 import { seo } from "~/utils/seo";
 
 export const Route = createFileRoute("/admin")({
@@ -21,6 +22,7 @@ function AdminLayout() {
       <div className="flex-1 min-w-0 flex flex-col">
         <Outlet />
       </div>
+      <Toaster richColors position="bottom-right" />
     </div>
   );
 }
diff --git a/package.json b/package.json
index 0543331f..d13bc86d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@turf/helpers": "^7.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "framer-motion": "^11.18.0",
     "fuse.js": "^7.1.0",
     "highcharts": "^12.2.0",
@@ -44,6 +45,7 @@
     "react-table": "^7.8.0",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1aa5ff4..17d8dbb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       framer-motion:
         specifier: ^11.18.0
         version: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -101,6 +104,9 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swiper:
         specifier: ^12.0.3
         version: 12.1.3
@@ -2465,6 +2471,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   colorette@1.4.0:
     resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
 
@@ -3419,6 +3431,12 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   sort-asc@0.2.0:
     resolution: {integrity: sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==}
     engines: {node: '>=0.10.0'}
@@ -5874,6 +5892,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   colorette@1.4.0: {}
 
   comma-separated-tokens@2.0.3: {}
@@ -7158,6 +7188,11 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   sort-asc@0.2.0: {}
 
   sort-desc@0.2.0: {}